精华内容
下载资源
问答
  • <button type="button" v-popwin="teacherlist">教师信息列表</button> <button type="button" v-popwin="studentlist">学生信息列表</button>
  • 自定义导航模板
  • 效果图 ...Notice.vue <template> <transition name="notice-fade"> <div v-if="visible" :class="wrapClasses"> <span class="content"> <i v-if="type === 'succe...

    博客地址:http://www.globm.top/blog/1/detail/26
    效果图
    notice目录结构
    project
    Notice.vue

    <template>
      <transition name="notice-fade">
        <div v-if="visible" :class="wrapClasses">
          <span class="content">
            <i v-if="type === 'success'" class="el-icon-success"></i>
            <i v-if="type === 'warning'" class="el-icon-warning"></i>
            <i v-if="type === 'error'" class="el-icon-error"></i>
            <i v-if="type === 'info'" class="el-icon-info"></i>
            <span :class="[prefixCls+'-content']">
              {{msg}}
            </span>
          </span>
        </div>
      </transition>
    </template>
    
    <script>
    const prefixCls = 'notice'
    export default {
      name: 'Notice',
      data () {
        return {
          visible: false,
          type: 'info',
          msg: '',
          duration: 1500,
          prefixCls: prefixCls
        }
      },
      computed: {
        wrapClasses () {
          return [`${prefixCls}`, `${prefixCls}-${this.type}`]
        }
      },
      mounted () {
        this.setTimer()
      },
      methods: {
        setTimer () {
          setTimeout(() => {
            this.close() // 3000ms之后调用关闭方法
          }, this.duration)
        },
        close () {
          this.visible = false
          setTimeout(() => {
            this.$destroy()
            this.$el.parentNode.removeChild(this.$el) // 从DOM里将这个组件移除
          }, 500)
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
      .notice-fade-enter-active,
      .notice-fade-leave-active {
        transition: all 0.3s ease;
      }
      .notice-fade-enter, .notice-fade-leave-to {
        transform: translateY(-20px);
        opacity: 0;
      }
      .notice {
        background-color: transparent!important;
        margin-bottom: 15px;
        .content{
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 0 0 10px rgba(34, 34, 34, 0.2);
          padding: 5px 8px;
          display: inline-block;
          width: auto;
          i{
            margin-right: 3px;
          }
        }
      }
      .notice-success {
        background-color: #fff;
        color: #67C23A;
      }
      .notice-info {
        color: #909399;
        background-color: #fff;
      }
      .notice-warning {
        color: #E6A23C;
        background-color: #fff;
      }
      .notice-error {
        background-color: #fff;
        color: #F56C6C;
      }
      .notice-content {
        font-size: 14px;
      }
    </style>
    
    

    index.js

    import Vue from 'vue'
    import NoticeTpl from './Notice.vue'
    const NoticeConstructor = Vue.extend(NoticeTpl)
    
    let nId = 1
    //在body下新建的标签类名
    let tagClass = 'dialog-notice'
    
    const Message = options => {
      if (JSON.stringify(options) === undefined) { return false }
      let id = 'notice-' + nId++
      options = options || {}
      if (typeof options === 'string') {
        options = {
          msg: options
        }
      }
      const NoticeInstance = new NoticeConstructor({
        data: options
      })
      NoticeInstance.id = id
      NoticeInstance.vm = NoticeInstance.$mount()
      NoticeInstance.vm.visible = true
      NoticeInstance.dom = NoticeInstance.vm.$el
      if (!document.querySelector(`body > .${tagClass}`)) {
        let div = document.createElement('div')
        div.classList.add(tagClass)
        document.body.appendChild(div)
        document.querySelector(`body > .${tagClass}`).appendChild(NoticeInstance.dom)
      }
      document.querySelector(`body > .${tagClass}`).appendChild(NoticeInstance.dom)
      // NoticeInstance.dom.style.zIndex = nId + 1001
      return NoticeInstance.vm
    }
    ['success', 'warning', 'info', 'error'].forEach(type => {
      Message[type] = options => {
        if (typeof options === 'string') {
          options = {
            message: options
          }
        }
        options.type = type
        return Message(options)
      }
    })
    
    export default {
      install (Vue, options = {}) {
        Vue.prototype.$notice = Message
      }
    }
    
    

    全局css文件

    .dialog-notice{
        position: fixed;
        top: 85px;
        display: inline-block;
        max-width: 300px;
        left: 0;
        right: 0;
        margin: 0 auto 10px auto;
        background-color: transparent!important;
        text-align: center;
        z-index: 9999;
    }
    

    main.js中注册使用

    import Notice from './common/notice/index.js'
    
    Vue.use(Notice)
    

    使用

    this.prototype.$notice.success({
      msg: '代码复制成功'
    })
    
    展开全文
  • 主要介绍了Vue 自定义指令功能,结合完整实例形式分析了vue.js自定义指令相关实现与使用操作技巧,需要的朋友可以参考下
  • vue自定义组件

    2018-05-04 22:56:18
    vue自定义组件

    vue中如何实现自定义组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-text</title>
        <script src="../assets/jquery-3.1.1.min.js"></script>
        <script src="../assets/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <wpwp :aaaaa="name"></wpwp>
        </div>
        <script>
            Vue.component('wpwp',{
                template: '<div @click="al">这是一个子组件----{{this.aaaaa}}</div>',
                data:function () {
                    return {
                        age: 18
                    }
                },
                props:["aaaaa"],
                methods:{
                    al:function(){
                        console.log(this.aaaaa);
                    }
                }
            });
    
            new Vue({
                el: '#app',
                data:{
                    name: 'weeeepwp'
                }
            })
        </script>
    </body>
    </html>

    自定义组件时,如果想要实现子组件可以访问vue实例中的属性,那么需要在子组件中设置props属性,props是一个数组,在使用组件的地方,使用props数组中的值,名字要和props中的一致,值的名字要和vue实例中data中的属性一致,这样就实现了父子的绑定,当在子组件中使用的时候,只需要使用this.props中的数组名就可以得到vue实例中的data的值


    展开全文
  • 主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 首先和普通组件一样定义一个自定义组件在components下面:CusConfirm <template> <transition name="fade"> <div class="cus-confirm-mask" v-if="flag" @click="cancel"> <d...

    先看一下我的目录结构:
    在这里插入图片描述

    1. 首先和普通组件一样定义一个自定义组件在components下面:CusConfirm
    <template>
        <transition name="fade">
            <div class="cus-confirm-mask" v-if="flag" @click="cancel">
                <div class="cus-confirm" @click.stop>
                    <div class="confirm-title">确认提示:</div>
                    <div class="confirm-body">{{title}}</div>
                    <div class="confirm-btns">
                        <button class="cancel-btn" @click="no">取消</button>
                        <button class="ok-btn" @click="sure">确认</button>
                    </div>
                </div>
            </div>
        </transition>
    </template>
    
    <script>
    export default {
        data() {
            return {
                flag: false,
                title: ""
            }
        },
        methods: {
            no() {
                this.flag = false;
                this.cancel();
            },
            sure() { 
                this.flag = false;
                this.ok();
            }
        }
    };
    </script>
    
    <style lang="less" scoped>
    // 渐变过渡
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.35s;
    }
    .cus-confirm-mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        .cus-confirm {
            width: 480px;
            height: 260px;
            box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
            position: absolute;
            top: calc(50% - 130px);
            left: calc(50% - 240px);
            border-radius: 12px;
            padding: 15px;
            z-index: 999;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #ffffff;
            .confirm-title {
                font-size: 28px;
            }
            .confirm-body {
                text-align: center;
                font-size: 18px;
            }
            .confirm-btns {
                text-align: right;
                button {
                    border: 0;
                    outline: none;
                    padding: 6px 18px;
                    border-radius: 6px;
                    margin: 0 12px;
                    font-size: 16px;
                    cursor: pointer;
                }
                .ok-btn {
                    background: #f5f5f5;
                    color: #fc9541;
                }
                .cancel-btn {
                    background: #fc9541;
                    color: #f5f5f5;
                }
                .ok-btn:active {
                    background: #e5e5e5;
                }
                .cancel-btn:active {
                    background: #fb7a12;
                }
            }
        }
    }
    </style>
    
    1. 看同级的index.js
    import Vue from 'vue'
    import CusConfirm from './CusConfirm.vue'
    
    const Confirm = Vue.extend(CusConfirm)
    
    CusConfirm.install = function (options) {
        /**
         * options的其他情况自行判断添加默认值等等
         */
        if (options === undefined || options === null) {
            options = {
                title: '是否确认?'
            }
        } else if (typeof options === 'string' || typeof options === 'number') {
            options = {
                title: options
            }
        }
    
        let instance = new Confirm({
            data: options
        }).$mount()
    
        document.body.appendChild(instance.$el)
    
        Vue.nextTick(() => {
            instance.flag = true //记得这里是控制弹窗显隐的状态,一定要同自定义组件里边 v-if 后面的值相同
        })
    }
    
    export default CusConfirm
    
    1. 在main.js里面引入,类似于使用第三方插件那样
    //自定义全局组件
    import CusConfirm from './components/CusConfirm'
    Vue.prototype.$confirm = CusConfirm.install;
    
    1. 然后就可以在任何地方使用了,比如我的退出按钮:
    <template>
        <div class="common-header">
    		<span class="logout-text" @click="showConfirm">退出</span>
        </div>
    </template>
    <script>
    export default {
        methods:{
            showConfirm(){
                console.log('退出');
                this.confirmFlag = true;
                this.$confirm({
                    title:"是否确认退出?",
                    cancel:()=>{
                        console.log('点取消调用');
                    },
                    ok:()=>{
                        console.log('点确定调用');
                        this.logout();
                    }
                });
            },
            logout() {
                let params = {};
                params.uid = this.storage.getItem("uid");
                this.$axios
                    .post(this.$api.loginlogout, params)
                    .then(res => {
                        if (res.data.code_status == 0) {
                            this.storage.clearAll();
                            this.$router.push("/login");
                        } else {
                            this.$Message.error(res.data.msg);
                        }
                    })
                    .catch(err => {
                        this.$Message.error("网络错误,请重试");
                    });
            },
        }
    };
    </script>
    
    展开全文
  • Vue自定义指令

    千次阅读 2020-11-02 19:43:21
    Vue自定义指令 不带参数的自定义指令 为何需要自定义指令? 内置指令不满足需求 自定义指令的语法规则(获取元素焦点) Vue.directive('focus', { inserted: function(el){ // el 表示指令所绑定的元素 // ...

    Vue自定义指令

    不带参数的自定义指令

    • 为何需要自定义指令?

      内置指令不满足需求

    • 自定义指令的语法规则(获取元素焦点)

      Vue.directive('focus', {
          inserted: function(el){
              // el 表示指令所绑定的元素
              // 获取元素的焦点
              el.focus();
          }
      });
      const app = new Vue({
          el: "#app",
          data: {},
      });
      

      注意:Vue实例对象必须写在自定义指令之后,否则会报错

    • 自定义指令用法

      <div id="app">
          <input type="text" v-focus />
          <input type="text" />
      </div>
      

    带参数的自定义指令

    • 改变元素背景颜色

      Vue.directive('color', {
          inserted: function(el, binding){
              // el 表示指令所绑定的元素
              // console.log(binding.value.color);
              el.style.backgroundColor = binding.value.color;
          }
      });
      const app = new Vue({
          el: "#app",
          data: {
              msg: {
                  color: "yellow"
              }
          },
      });
      
    • 指令的用法

      <div id="app">
          <input type="text" v-color="msg" />
      </div>
      

    局部指令

    directives: {
        "color": {
            inserted: function(el, binding){
                // el 表示指令所绑定的元素
                // console.log(binding.value.color);
                el.style.backgroundColor = binding.value.color;
            }
        }
    }
    
    展开全文
  • 本文给大家分享vue自定义指令拖拽功能及自定义键盘信息,非常不错,具有参考借鉴价值,需要的的朋友参考下
  • Vue 自定义右键菜单

    千次阅读 2019-06-29 14:23:29
    Vue 自定义右键菜单 在Vue中可能涉及到对右键菜单的使用(比如右键选中删除),并且希望使用自定义的右键菜单条目。实现过程记录如下。 1、环境配置 vue echarts安装不赘述,这里需要使用特定的右键菜单插件: @...
  • Vue自定义组件 Vue.component

    千次阅读 2018-09-16 23:32:35
    Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教程还是写的简单易懂的。 Component是Vue.js最核心的功能,...
  • vue 自定义滑块 VUE自定义范围滑块 (vue-custom-range-slider) This is a simple vue-range slider, that supports custom values, labels and more. The component is based on use with v-model, the value is ...
  • jQuery jQuery自定义插件 vue vue自定义组件 react react自定义组件
  • 主要介绍了VUE 自定义组件模板的方法,结合实例形式详细分析了vue.js自定义组件模板的相关步骤与操作技巧,需要的朋友可以参考下
  • 主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识,感兴趣的朋友一起看看吧
  • vue自定义音频播放组件 音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vue.js创建自定义音频播放器组件。 安装 (Installation) npm install vue-audio-better -...
  • vue自定义指令-vue-reclick

    千次阅读 2017-12-23 16:18:29
    vue自定义指令
  • Vue 自定义指令如何使用 自定义指令分为全局自定义指令和局部自定义指令: 全局自定义指令: 使用 Vue.directive()来全局注册指令 局部自定义指令: 也可以注册局部指令,组件或 Vue 构造函数中接受一个 directives 的...
  • Vue允许我们自定义指令 Vue.directive 注册全局指令 <!-- 使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。 --> <input type="text" v-focus> <...
  • Vue自定义事件

    千次阅读 2018-02-14 09:18:35
    本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget AP...
  • 主要为大家详细介绍了Vue编写可显示周和月模式的日历,Vue自定义日历内容的显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,503
精华内容 11,401
关键字:

vue自定义

vue 订阅