对 element-ui 的一些组件做的拓展自定义指令工具

vue 使用 element-ui 项目的一些工具方法、拓展自定义指令等

Custom Directives 对 element-ui 的一些组件做的拓展自定义指令工具

使用yarn包管理

提供指令：

提供原型方法：

yarn add vue-element-utils npm install vue-element-utils

入口文件引入：

import elementUtils from 'vue-element-utils' Vue.use(elementUtils); v-select-scroll

<template> <el-select v-model="value" placeholder="请选择" v-el-select-scroll="selectScroll"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </template> <script> function createOptions(len, start = 0) { return Array(len) .fill(0) .map((_, index) => ({ value: `选项${start + index}`, label: `我是${start + index}` })); } export default { data() { return { options: createOptions(10), value: '', pageIndex: 0, }; }, mounted() { this.options = createOptions(10); }, methods: { selectScroll() { console.log('selectScroll'); // Select 滚动到底部 执行该方法 // 这里可以做一些懒加载之类的事情，eg： this.pageIndex++; this.options.push(...createOptions(10, 10 * this.pageIndex)); }, } }; </script> v-dialog-drag

<template> <section> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" v-el-dialog-drag > <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </section> </template> <script> export default { data() { return { dialogVisible: false }; } }; </script> v-dialog-drag-width

<template> <section> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" v-el-dialog-drag-width > <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </section> </template> <script> export default { data() { return { dialogVisible: false }; } }; </script> v-dialog-corner

<template> <div> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" v-el-dialog-corner > <span>右下角可拖拽宽高变化</span> <span slot="footer" class="dialog-footer"> <el-button>取 消</el-button> <el-button type="primary">确 定</el-button> </span> </el-dialog> </div> </template> 剪切板clipboard

<template> <div> <el-button v-clipboard:success="clipboardSuccess" v-clipboard:error="clipboardError" v-clipboard="'我是被复制的内容1'" > 方法1 </el-button> <el-button @click="handleCopy">方法2</el-button> </div> </template> <script> export default { methods: { handleCopy() { this.$clipboard('我是被复制的内容2').then(res => { console.log(res); }); }, clipboardSuccess(msg) { console.log(msg); }, clipboardError(err) { console.log(err); }, } }; </script>