您的位置:68399皇家赌场 > 服务器租用 > Vue.js完结在下拉列表区域外点击就能够关闭下拉

Vue.js完结在下拉列表区域外点击就能够关闭下拉

发布时间:2019-05-24 20:53编辑:服务器租用浏览(60)

    <template>
     <div class="lottery-management-wrapper">
      <ul>
       <li class="lottery-management-list-wrapper">
        <div class="lottery-management-list" v-for="(item , index) in activityListData">
         <div class="lottery-management-list-left" @click="detailOfTheActivity(item)">
          <dl>
           <dd>
            <h3>{{item.activityName}}</h3>
            <p>活动时间:{{item.beginTime}}至{{item.endTime}}</p>
           </dd>
           <dt :class="item.status == 3 ? 'txt-red': item.status == 0 ? 'txt-blue' : ''">{{item.status == 3 ? '进行中': item.status == 1 ? '已结束': item.status == 0 ? '待启用' : ''}}</dt>
          </dl>
         </div>
         <div class="lottery-management-list-right">
          <a @click="startActivityAlert = true;currentItem = item;currentIndex = index" v-if="item.status == 0">启用活动</a>
          删除活动
          结束活动
         </div>
        </div>
       </li>
      </ul>
      <div class="add-wrapper" @click="addAwardActivity">
    
       新增活动
      </div>
      <h4>商户员工账号只有活动查看权限,没有活动操作权限</h4>
      <transition name="fade">
       <div class="mask-wrapper"
          v-show="delActivityAlert"
          @touchmove.prevent>
        <tipsBox title="操作提示"
             text1="是否删除当前活动"
             button1="取消"
             button2="确定"
             @confirm="delActivity"
             @cancel="delActivityAlert = false">
        </tipsBox>
       </div>
      </transition>
      <transition name="fade2">
       <div class="mask-wrapper"
          v-show="stopActivityAlert"
          @touchmove.prevent>
        <tipsBox title="操作提示"
             text1="是否停止当前活动"
             button1="取消"
             button2="确定"
             @confirm="stopActivity"
             @cancel="stopActivityAlert = false">
        </tipsBox>
       </div>
      </transition>
      <transition name="fade3">
       <div class="mask-wrapper"
          v-show="startActivityAlert"
          @touchmove.prevent>
        <tipsBox title="操作提示"
             text1="是否启用当前活动"
             button1="取消"
             button2="确定"
             @confirm="startActivity"
             @cancel="startActivityAlert = false">
        </tipsBox>
       </div>
      </transition>
     </div>
    </template>
    <script>
     import TipsBox from 'components/tipsBox/TipsBox';
     import {configs} from 'common/js/config.js';
     import {baseAjaxParam, baseAjaxErr} from 'common/js/publicFn.js';
     const activityListApi = configs.baseApi   '/marketing/rouletter/activityList';
     const overActivityApi = configs.baseApi   '/marketing/rouletter/overActivity';
     const delActivityApi = configs.baseApi   '/marketing/rouletter/delActivity';
     const startActivityApi = configs.baseApi   '/marketing/rouletter/startActivity';
     export default {
      data () {
       return {
        delActivityAlert: false,
        stopActivityAlert: false,
        startActivityAlert: false,
        activityListData: [],
        currentItem: null,
        currentIndex: null
       };
      },
      methods: {
       getActivityList () {
        let data = baseAjaxParam(this);
        this.$http.jsonp(activityListApi, {params: data}).then((res) => {
         if (res.body.code === 0) {
          this.activityListData = res.body.data;
          this.setSlide();
         } else {
          baseAjaxErr(this, res);
         }
        }).catch(function (err) {
         alert('服务器错误:'   err.status);
         console.log(err);
        });
       },
       setSlide () {
        this.$nextTick(() => {
         let list = document.getElementsByClassName('lottery-management-list');
         if (list) {
          if (this.currentIndex !== null) {
           list[this.currentIndex].firstElementChild.style.marginLeft = '0';
          }
          for (let i = 0; i < list.length; i  ) {
           (() => {
            let start = 0;
            list[i].ontouchstart = function (e) {
             start = e.touches[0].pageX;
            };
            list[i].ontouchmove = function () {
             list[i].ontouchend = function (e) {
              let end = e.changedTouches[0].pageX;
              let rightWidth = list[i].lastElementChild.offsetWidth;
              if (end < start) {
               list[i].firstElementChild.style.marginLeft = -rightWidth   'px';
              }
              if (end > start) {
               list[i].firstElementChild.style.marginLeft = '0';
              }
             };
            };
           })(i);
          }
         }
        });
       },
       // 查看详情
       detailOfTheActivity (item) {
        this.$router.push('/detailOfTheActivity?activityId='   item.activityId);
       },
       // 删除活动
       delActivity () {
        if (this.$store.state.roleId !== '0' && this.$store.state.roleId !== 'ROL197001010800007e4b5ce2fe28308' && this.$store.state.roleId !== 'ROL197001010800004ca4238a0b92382') {
         if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {
          this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});
          return;
         }
        }
        this.delActivityAlert = false;
        let data = baseAjaxParam(this);
        data.activityId = this.currentItem.activityId;
        this.$http.jsonp(delActivityApi, {params: data}).then((res) => {
         if (res.body.code === 0) {
          this.$store.commit('popSet', {tips: '删除动成功', status: 0, time: 1500});
          this.getActivityList();
         } else {
          baseAjaxErr(this, res);
         }
        }).catch(function (err) {
         alert('服务器错误:'   err.status);
         console.log(err);
        });
       },
       // 停止活动
       stopActivity () {
        if (this.$store.state.roleId !== '0' && this.$store.state.roleId !== 'ROL197001010800007e4b5ce2fe28308' && this.$store.state.roleId !== 'ROL197001010800004ca4238a0b92382') {
         if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {
          this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});
          return;
         }
        }
        this.stopActivityAlert = false;
        let data = baseAjaxParam(this);
        data.activityId = this.currentItem.activityId;
        this.$http.jsonp(overActivityApi, {params: data}).then((res) => {
         if (res.body.code === 0) {
          this.$store.commit('popSet', {tips: '结束活动成功', status: 0, time: 1500});
          this.getActivityList();
         } else {
          baseAjaxErr(this, res);
         }
        }).catch(function (err) {
         alert('服务器错误:'   err.status);
         console.log(err);
        });
       },
       // 启用活动
       startActivity () {
        if (this.$store.state.roleId !== '0' && this.$store.state.roleId !== 'ROL197001010800007e4b5ce2fe28308' && this.$store.state.roleId !== 'ROL197001010800004ca4238a0b92382') {
         if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {
          this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});
          return;
         }
        }
        this.startActivityAlert = false;
        let data = baseAjaxParam(this);
        data.activityId = this.currentItem.activityId;
        this.$http.jsonp(startActivityApi, {params: data}).then((res) => {
         if (res.body.code === 0) {
          this.$store.commit('popSet', {tips: '启用活动成功', status: 0, time: 1500});
          this.getActivityList();
         } else {
          baseAjaxErr(this, res);
         }
        }).catch(function (err) {
         alert('服务器错误:'   err.status);
         console.log(err);
        });
       },
       addAwardActivity () {
        if (this.$store.state.roleId !== '0' && this.$store.state.roleId !== 'ROL197001010800007e4b5ce2fe28308' && this.$store.state.roleId !== 'ROL197001010800004ca4238a0b92382') {
         if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {
          this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});
          return;
         }
        }
        this.$router.push('addAwardActivity');
       }
      },
      created () {
       this.getActivityList();
      },
      components: {
       TipsBox
      }
     };
    </script>
    <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../common/stylus/mixin'
     .lottery-management-wrapper {
      width :100%;
      position :absolute;
      background-color :#ECF0F3;
      min-height :100%;
      .lottery-management-list-wrapper {
       width :100%;
       overflow hidden;
       .lottery-management-list {
        background-color :#fff;
        margin-bottom cal(10);
        overflow :hidden;
        width :200%;
        .lottery-management-list-left {
         width :cal(750);
         float :left;
         transition: margin-left .4s;
         dl {
          overflow :hidden;
          height :cal(128);
          dd {
           float left;
           width :80%;
           h3 {
            font-size :cal(28);
            color: #4A4A4A;
            margin:cal(32) 0 0 cal(50);
           }
           p {
            font-size : cal(18)
            color:#4A4A4A;
            margin:cal(16) 0 0 cal(50);
           }
          }
          dt {
           float :left;
           width :20%;
           color: #9B9B9B;
           font-size :cal(26);
           line-height :cal(128);
          }
          .txt-red {
           color:#D0021B;
          }
          .txt-blue {
           color:#4A90E2;
          }
         }
        }
        .lottery-management-list-right {
         float :left;
         overflow: hidden;
         font-size :cal(24);
         line-height :cal(128);
         color :#ffffff;
         text-align :center;
         a {
          float: left;
          background-color :#70AEF6;
          width :cal(190);
          color :#ffffff;
         }
         span {
          float: left;
          width :cal(128);
          background-color :#FE3A32;
         }
        }
       }
      }
      .add-wrapper {
       height: cal(100)
       box-sizing: border-box
       padding-top: cal(24)
       margin-bottom: cal(72)
       background: #fff
       text-align: center
       font-size: 0
       margin-top :cal(20)
       .icon-tianjia1 {
        color: #fe6f3f
        font-size: cal(54)
        vertical-align: top
        margin-right: cal(12)
       }
       .text {
        line-height: cal(60)
        vertical-align: top
        color: #fe6f3f
        font-size: cal(30)
       }
      }
      h4 {
       color: #D0021B;
       font-size :cal(24);
       text-align: center;
       margin-bottom :cal(100);
      }
      .mask-wrapper {
       position: fixed
       left: 0
       right: 0
       bottom: 0
       top: 0
       background: rgba(0,0,0,.5)
       &.fade-enter-active, &.fade-leave-active {
        transition: all 0.2s linear
       }
       &.fade-enter,&.fade-leave-active{
        opacity: 0
       }
       &.fade2-enter-active, &.fade2-leave-active {
        transition: all 0.2s linear
       }
       &.fade2-enter,&.fade2-leave-active{
        opacity: 0
       }
       &.fade3-enter-active, &.fade3-leave-active {
        transition: all 0.2s linear
       }
       &.fade3-enter,&.fade3-leave-active{
        opacity: 0
       }
      }
     }
    </style>
    
    <textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea>
    

        伊始化时,v-model 绑定的变量是数组类型时。vue 以为那几个复选开关是用来获取值,会以选择(鼠标点击)的顺序将相应的值写入到数组中。

    推荐介绍读者使用 yarn install设置所需的依赖。

    上述所述是俺给大家介绍的vue 下列表侧滑操作实例代码详解,希望对大家具有协助,假使大家有其它疑问请给本人留言,作者会及时回复咱们的。在此也特别感激大家对台本之家网址的支撑!

    <input v-model:"msg" placeholder="edit me"/>
    

        在一般标签中,当没写name时,html 会默许将没写name 的单选开关分为1组;

    在付出进度中,为了效果雅观,往往必要自身成本3个下拉列表,而不是运用 HTML 本身的 select 下拉列表。不过当编辑自定义下拉列表的时候,就能遇上1个主题材料:假诺用户在下拉列表的界定外举办鼠标点击的操作,怎么样关闭已经张开的下拉列表?

    是因为是上线的体系且已经依据数据逻辑去渲染了能看懂的看逻辑吗。有一点点多

    .trim

        开始化时,hobbies0壹值为空字符串转化为Boolean类型时false,所以未当选;hobbies0贰值为字符串“....”,转化为Boolean类型是true,所以暗许选中;hobbies03私下认可值是false,所以伊始化时未选中。

    假定是纯 JS 代码,有人可能会使用document.onclick来增添根节点事件。然而,我现在选拔Vue.js,会采用采用 Vue.js 的法子管理那几个难题。

    总结

    <!-- 当选中时,`picked` 为字符串 "a" -->
    <input type="radio" v-model="picked" value="a">
    <!-- `toggle` 为 true 或 false -->
    <input type="checkbox" v-model="toggle">
    <!-- 当选中时,`selected` 为字符串 "abc" -->
    <select v-model="selected">
     <option value="abc">ABC</option>
    </select> 
    

        发轫化时 hobbies 是1个空数组。注意鼠标点击顺序和 hobbies 值的呼应变化。                 

    先后入口 main.js:

    图片 1

    你或者感兴趣的篇章:

    • vue表单绑定达成多选框和下拉列表的实例
    • Vue 表单控件绑定的兑现示例
    • VUE落成表单成分双向绑定(计算)
    • Vue.js基础指令实例讲明(种种数码绑定、表单渲染大计算)
    • vue v-model表单控件绑定详解
    • Vue.js事件处理器与表单控件绑定详解
    • vue二.0数码双向绑定与表单bootstrap vue组件
    • 上学vue.js表单控件绑定操作
    • Vue.js每日必学之表单控件绑定
    window.onload = function (){
     new Vue({
     el:"#app",
     data:{
      hobbies01:"",
      hobbies02:"...",
      hobbies03:false
     }
     });
    }
    

    读者能够在那些网站下载笔者编写的 德姆o 项目:

    职能如图

     {{msg}}
    <input type="text" v-model.lazy:"msg"/> 
    

    3.① 下拉列表

    上边说一下根本代码:

    你只怕感兴趣的稿子:

    • vue swiper达成侧滑菜单作用
    • Vue侧滑菜单组件——DrawerLayout
    • vue如何通过id从列表页跳转到对应的详细情形页
    • Vue.js表单标签中的单选按键、复选按键和下拉列表的取值难点
    • Vue.js完毕列表清单的操作方法
    • 浅谈vue的iview列表table render函数设置DOM属性值的方法
    • vue表单绑定实现多选框和下拉列表的实例
    • vue达成列表的丰富点击
    • vue.js学习笔记之绑定style样式和class列表

    修饰符

            在data中定义的变量gender的值将震慑到单选开关的私下认可选项,如: 本例子中gender:"女",暗中同意选项女。

    上述所述是作者给大家介绍的Vue.js完结在下拉列表区域外点击就可以关闭下拉列表的机能(自定义下拉列表),希望对我们享有援救,要是我们有其余疑问接待给自己留言,笔者会及时回复大家的!

    <input type="checkbox" value="看电影" v-model="checked"/>
    <input type="checkbox" value="打游戏" v-model="checked"/>
    <input type="checkbox" value="音乐" v-model="checked"/>
    {{ checked }} 
    
    var vm=new Vue({
       el:'#app',
       date:{
        checked:[]
       }, 
    

    您或者感兴趣的篇章:

    • vue项目中采用ueditor自定义上传按键功效
    • Vue写一个简短的倒计时按键功用
    • vue达成验证码开关倒计时效用
    • vue 开采多个开关组件的言传身教代码
    • Vue.js 点击按键展现/隐藏内容的实例代码
    • 详解vue vuex directives完结权力开关的思路
    • VueJS 集成 Medium 艾德itor的言传身教代码 (自定义编辑器开关)
    • Vue.js实现开关的动态绑定效果及完成代码
    • vue组件中式点心击开关后修改输入框的图景实例代码
    • 行使vue落成点击按键滑出面板的贯彻代码
    • Vue波纹开关组件制作

    解决思路如下:在 DOM 的根节点上增加3个 click 事件,同不时候下拉列表内阻止事件的默许行为和冒泡。当响应这么些点击事件的时候,表达是在下拉列表范围外的点击(因为下拉列表内阻止了轩然大波的冒泡),就能够关闭已经开垦的下拉列表。

    .number

        依照钦赐值选用对应<option> 增多选中状态。

    那么什么样让各类子组件响应根组件上的点击事件呢?可以运用Vuex来达成那或多或少。在这里 Vuex 起到了组件之间相互传递音信的效率。

    单选开关 

    Vue.js能够很有益的落到实处多少双向绑定,所以在拍卖表单,人机交互方面抱有很大的优势。上边给大家介绍Vue.js表单标签中的单选开关、复选开关和下拉列表的取值难点。

    Vue.js 使用组件化的方法组织代码,会有3个根组件,能够在这么些根组件上加上 @click 事件,来响应区域外的点击事件。在三个完好无缺的使用中,或然有多种气象要求这种区域外点击关闭的效果。除了最平日的表单里的下拉列表外,还大概是网址右上角的新闻提醒框,大概菜单。比较确切的做法是把点击事件的现实性管理逻辑放到各种零部件中去。

    表单输入绑定

    window.onload = function (){
     new Vue({
     el:"#app",
     data:{
      s:""
     }
     });
    }
    

    根节点 App.vue,加多了点击事件。

     <select v-model="selected">
     <option disabled value="">请选择</option>
     <option>河北</option>
     <option>山西</option>
     <option>北京</option> 
     </select>
    {{ selected }} 
    
    var vm=new Vue({
     el:'#app',
     date:{
      selected:'',
     }, 
    

    html代码段:

    你大概感兴趣的稿子:

    • vuex达成简易计数器
    • Vuejs第二篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
    • VUEJS实战之营造基础并渲染出列表(一)
    • vue.js学习笔记之绑定style样式和class列表
    • Vue.js Ajax动态参数与列表呈现实现格局
    • 浅谈vue的iview列表table render函数设置DOM属性值的艺术
    • vue实现列表的丰裕点击
    • 选取vue框架 Ajax获取数据列表并用BootStrap突显出来
    • 利用VUE框架,完成列表分页功用示例代码
    • Vuex完结计数器以及列表呈现效果

    复选框

    以上所述是作者给大家介绍的Vue.js表单标签中的单选开关、复选开关和下拉列表的取值难点,希望对大家持有协理,借使大家有任何疑问请给自己留言,小编会及时苏醒大家的。在此也非常多谢大家对台本之家网址的支撑!

    import Vue from 'vue'
    import App from './App.vue'
    import VueRouter from 'vue-router'
    import routes from './router'
    import VueSuperagent from 'vue-superagent'
    import Vuex from 'vuex'
    import 'babel-polyfill';
    import store from './vuex/store';
    Vue.use(VueRouter);
    Vue.use(VueSuperagent);
    Vue.use(Vuex);
    const router = new VueRouter({
     mode: 'history',
     routes
    })
    new Vue({
     el: '#app',
     router,
     store,
     render: h => h(App)
    })
    

    .lazy

        在vue中,固然没写name,只要单选开关v-model绑定了同3个变量(如:gender),这么些按键也会被分成一组。然则习于旧贯上,大家依然也写上name。

    <template>
     <div @click="clickRoot">
      <router-view></router-view>
     </div>
    </template>
    <script>
      export default {
        methods:{
          clickRoot(event){
            this.$store.dispatch("clickRootNumAction", 1);
          }
        }
      }
    </script>
    
    <select v-model="selected">
     <!-- 内联对象字面量 -->
     <option v-bind:value="{ number: 123 }">123</option>
    </select> 
    
    // 当选中时
    typeof vm.selected // => 'object'
    vm.selected.number // => 123 
    

        下拉列表:下拉列表中 v-model 写在下拉列表的竹签中 <select>标签中。

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:Vue.js完结在下拉列表区域外点击就能够关闭下拉

    关键词: 68399皇家赌场