优秀的编程知识分享平台

网站首页 > 技术文章 正文

超赞 Vue 移动端UI组件库Zarm-Vue

nanyue 2025-01-11 15:53:47 技术文章 2 ℃

今天给小伙伴们分享一款为用户体验而生的Vue手机端组件库ZARM-VUE。

zarm-vue 众安科技推出的一款基于 vue2.0 的Mobile组件库。提供了30+多个常用组件。主要适用于企业级移动端开发。

安装

$ npm i zarm-vue -S

引入组件

// 全局引入
import Vue from 'vue';
import zarmVue from 'zarm-vue';
import 'zarm-vue/zarm-vue.default.css';
Vue.use(zarmVue);

// 按需引入
import { Button, Alert } from 'zarm-vue'
Vue.use(Button)
Vue.use(Alert)

使用组件

<template>
  <div id="app">
    <za-input v-model="v1" type="text" :clearable="true" />
    <za-input v-model="v2" type="textarea" :clearable="true" />
    <za-button ghost>default</za-button>
    <za-button theme="primary" block @click="visible1 = true">primary</za-button>
    
    <za-toast :visible.sync="visible1" @close="toastClose">默认3秒自动关闭</za-toast>
  </div>
</template>
<script>
export default {
  data() {
    return {
      v1: '',
      v2: '',
      visible1: false
    }
  },
  methods: {
    toastClose(reason, event){
      console.log(reason, event);
    }
  },
}
</script>

提供了很多实用化的组件,这里不一一介绍了,感兴趣的朋友不可错过哈~

最后附上文档及项目地址

# 文档地址
https://zarm-vue.gitee.io/

# 组件demo地址
https://zarm-vue.gitee.io/zarm-vue/demo.html

# 仓库地址
https://github.com/ZhongAnTech/zarm-vue

好了,就介绍到这里。如果大家有其它优质vue.js组件库,欢迎一起分享交流!

Tags:

最近发表
标签列表