Avue 组件库的使用初体验

目录
  • 1. 使用的初体验
  • 2. 不好的地方

1. 使用的初体验

今天给大家讲一下我最近发现的比较冷门的一个组件库,但是功能还是蛮多,这里就给大家介绍一下 , 网址也给大家放在这里 Avue

这里我大概介绍一下,因为我这里也就是做了几个dome,并没有拿到实际的项目中,但是,却发现的一些好的地方,跟需要闭坑的地方

  • 这里的组件超级多,而且很丰富 ,下面就是签名啊

还可以调用我的摄像头

图片的裁剪

2. 不好的地方

发现这边的文档写的相当的不全面,例如我上面的那个签名的介绍

<avue-sign ref="sign"></avue-sign>
<el-button type="primary" @click="handleSubmit">生成</el-button>
<el-button type="danger" @click="$refs.sign.getStar('这里是用途','这里是单位的名称','123456')">图章</el-button>
<el-button @click="$refs.sign.clear()">清空</el-button>
<div>
<br />
  结果
  <img :src="img" alt="" width="80" height="50" />
</div>
<script>
export default {
    data() {
      return {
        img: ''
      }
    },
    methods: {
      handleSubmit() {
        this.img = this.$refs.sign.submit(80, 50);
        console.log(this.img)
      }
    }
}
</script>

这里是安装的介绍,我复制上面的代码到我的项目中去的时候,然后发现所有的按钮都出不来,我看到熟悉的el-button 我发现了,这个玩意竟然就是在饿了么上面进行了二次封装, 其他的我也没有多看,大家跟着文档走一遍,本人还是蛮喜欢的,朴实无华的

以上就是Avue 组件库的使用初体验的详细内容，更多关于Avue 组件库的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • avue实现自定义搜索栏及清空搜索事件的实践

    avue实现自定义搜索栏及清空搜索事件的实践

    目录 1.自定义搜索栏内容 2.自定义搜索按钮 对搜索栏进行自定义,并通过按钮实现折叠搜索栏效果.自定义效果如下: 折叠前: 折叠后: 1.自定义搜索栏内容 其实也简单,只要在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="search"属性即可自定义搜索栏内容: <template slot-scope="scope" slot=&q

  • Avue和Element-UI动态三级表头的实现

    Avue和Element-UI动态三级表头的实现

    目录 Avue配置方式 Element-UI三级表头动态写法 需求场景: 业务方希望有表格可以体现员工的考勤信息,要具体到上午下午,统计司机上下班打卡所产生的数据.产品提出想做成三级表头根据页面查询条件的年月去动态生成表格的表头.三级分别是月份日期,对应的星期,以及每天的上午以及下午. 效果如下: Avue配置方式 通过对avue-crud组件的option的配置如下: { label: `${$this.month}月${$this.dateList[0].ri}日`, // 月份 heade

  • avue-crud多级复杂的动态表头的实现示例

    avue-crud多级复杂的动态表头的实现示例

    目录 前言 后台数据拼接 前台数据展示 页面效果展示 Avue.js 是基于现有的element-ui库进行的二次封装,从而简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易. 前言 在实际开发过程,需要多级复杂的动态表头,表头中的内容是动态填充的.以下是avuejs官网提供的负责表头样式,因此我后台返回的数据,需要拼接avue-crud中的

  • Avue 组件库的使用初体验

    Avue 组件库的使用初体验

    目录 1. 使用的初体验 2. 不好的地方 1. 使用的初体验 今天给大家讲一下我最近发现的比较冷门的一个组件库,但是功能还是蛮多,这里就给大家介绍一下 , 网址也给大家放在这里 Avue 这里我大概介绍一下,因为我这里也就是做了几个dome,并没有拿到实际的项目中,但是,却发现的一些好的地方,跟需要闭坑的地方 这里的组件超级多,而且很丰富 ,下面就是签名啊 还可以调用我的摄像头 图片的裁剪 2. 不好的地方 发现这边的文档写的相当的不全面,例如我上面的那个签名的介绍 <avue-sign re

  • vue.js 初体验之Chrome 插件开发实录

    vue.js 初体验之Chrome 插件开发实录

    背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中

  • java Spring Boot的介绍与初体验

    java Spring Boot的介绍与初体验

    目录 Spring Boot 介绍 系统要求 构建工具 Servlet 容器 初体验 总结 Spring Boot 介绍 Spring Boot用于创建可运行的.独立的.生产级的基于Spring的应用程序.Spring Boot对Spring和第三方库持约定大于配置的观念,以便可以轻松上手.大多数Spring Boot应用程序只需要很少的配置. Spring Boot可以通过使用java -jar或更传统的war包部署来启动Java应用程序,Spring Boot的目标是: 为所有Spring开

  • Mint UI 基于 Vue.js 移动端组件库

    Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • NetCore1.1+Linux部署初体验

    NetCore1.1+Linux部署初体验

    NetCore1.1+Linux部署初体验 1.环境准备 Centaos7+Win10 虚拟机 Win10安装VS2017 注意勾选下.Net Core 3.Centaos安装netcore 1.1参见https://www.microsoft.com/net/core sudo yum install libunwind libicu curl -sSL -o dotnet.tar.gz https://go.microsoft.com/fwlink/?linkid=848821 sudo m

  • 浅谈基于Vue.js的移动组件库cube-ui

    浅谈基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,虽然组件还不是很多,但是基本场景是够用了,感谢开源! 首先创建一个vue项目 vue init webpack my-project cd my-project npm install 安装cube-ui npm install cube-ui -S 官方推荐使用 babel-plugin-transform-modules 插件,可以更优雅引入组件模块以及对应的样式. npm install babel-pl

  • Vue中UI组件库之Vuex与虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4, 1); 或 new Date(2018, 5-1, 1); 下面表达式是:2018年5月31日(得到上个月的最后一天) new Date(2018, 5 , 0); 日的参数可以是0,也可以是负数,表示上个月底的那一天. 下面表达式是:2018年7月01日 new Date(2018, 5, 3

  • 详解如何搭建mpvue框架搭配vant组件库的小程序项目

    1. vant 介绍 ### 扫码体验 Vant - 轻量.可靠的移动端 Vue 小程序 组件库.由 有赞 公司开发与维护.提供了一系列美观.优质的移动端组件.vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,详见npm 支持 # npm npm i vant-weapp -S --product

  • Django3.0 异步通信初体验(小结)

    此前博主曾经写过一篇博文,介绍了Django3.0的新特性,其中最主要的就是加入对ASGI的支持,实现全双工的异步通信. 2019年12月2日,Django终于正式发布了3.0版本.怀着无比的期待,我们来尝试一下吧! (附ASGI官方文档地址:https://asgi.readthedocs.io/en/latest/extensions.html) 一.创建Django3工程 利用Pycharm的方便,直接通过virtualenv创建虚拟环境,并安装Django3.0. 打开控制台,看看都安装

  • vue组件库的在线主题编辑器的实现思路

    一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题,但是主题定制需求永远都存在,所以组件库一般都会允许使用者自定义主题,我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的,新体系下还做到了动态换肤,因为皮肤本质上是一种静态资源(CSS文件和字体文件),所以只需要约定一种方式来每次动态请求加载不同的文件就可以了,为了方便这一需求,还配套开发了一个Vessel脚手架的插件,只需要以配置文件的方式列出你需要修改的变量和值,一个命令就可以帮你生成对应的皮

随机推荐