精华内容
下载资源
问答
  • vue选择框
    2022-07-29 16:15:35
    只需在所需要的选择框加入即可。
    disabled="disabled"

     

    更多相关内容
  • 基于Vue的Toast提示框

    2021-05-27 15:31:42
    vue 类似安卓 IOS的toast 提示框 比如 登录成功后就可以使用
  • VUE提示框组件

    千次阅读 2021-02-19 09:37:49
    vue单一提示框组件

    1.效果展示


    vue组件瞎封装系列:

    VUE简单提示框

    VUE选择商品多规格(库存判断)

    VUE多店铺购物车

     

    2.代码实现

    tips.vue:

    <template>
      <div class="notic_shade flex-center">
        <div class="notic_box">{{msg}}</div>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            msg: "GHUI"
          }
        },
        mounted() {
          setTimeout(() => {
            this.$el.remove()
          }, 1500)
        }
      }
    </script>
    
    <style scoped="scoped">
      .notic_shade {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
      }
    
      .notic_box {
        padding: .15rem .4rem;
        color: white;
        background: rgba(0, 0, 0, .6);
        border-radius: 5px;
        z-index: 9;
        animation: notictr .5s;
      }
    
      @keyframes notictr {
        from {
          opacity: 0;
        }
    
        to {
          opacity: 1;
        }
      }
    </style>
    

    tips.js:

    import Vue from 'vue';
    import notic from './tips.vue'
    
    const noticCont = Vue.extend(notic);
    
    export default function notice(options) {
      // 实例化
      const noticEg = new noticCont({
        data:options
      });
      // 挂载
      noticEg.$mount();
      // 添加到body
      document.querySelector(".ui-content").appendChild(noticEg.$el);
      return noticEg;
    }
    

    3.使用

    现在main.js全局挂载

    main.js:

    import tips from './components/ghTips/tips'
    Vue.prototype.$tips = tips;

    然后到页面vue文件直接使用:

    page-tips.vue:

    <template>
    	<div class="ui-pane">
    		<ui-header headertit="提示框"></ui-header>
    		<div class="ui-content" @click.self="contClick">
    			<arealine linetit="点击页面试试"></arealine>
    			<div class="area-line flex-between">
    				<div class="area_left">
    					<div class="line_tit" @click="titClick">
    						我系渣渣辉陪你贪玩蓝月
    					</div>
    					<div class="line_cont" @click="msgClick">
    						我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月
    					</div>
    					<div class="flex-star line_num">
    						<div class="flex-star">
    							<svg class="icon" aria-hidden="true">
    								<use xlink:href="#icon-liulan"></use>
    							</svg>
    							<span>666</span>
    						</div>
    						<div class="flex-star" @click="likesClick">
    							<svg class="icon" aria-hidden="true">
    								<use xlink:href="#icon-zan"></use>
    							</svg>
    							<span>688</span>
    						</div>
    					</div>
    				</div>
    				<div class="line_rihgt bg-aaa flex-center" @click="imgClick"><span>图片</span></div>
    			</div>
    		</div>
    	</div>
    </template>
    
    <script>
    	export default {
    		methods: {
    			imgClick() {
    				this.$tips({
    					msg: "点击图片"
    				});
    			},
    			titClick(){
    				this.$tips({
    					msg: "点击标题"
    				});
    			},
    			msgClick(){
    				this.$tips({
    					msg: "点击内容"
    				});
    			},
    			likesClick(){
    				this.$tips({
    					msg: "点赞"
    				});
    			},
    			contClick(){
    				this.$tips({
    					msg: "页面被点击"
    				});
    			}
    			
    		}
    	}
    </script>

    开工第一天加油!!!

    展开全文
  • Vue实现穿梭效果

    2020-10-14 17:24:11
    主要为大家详细介绍了Vue实现穿梭效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • VUE-消息提示框.docx

    2019-12-10 20:21:47
    本文档简单描述了vue+element ui中的可输入多种格式内容的消息提示框,并且新增了消息提示校验和抛出校验的错误信息
  • 1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var showToast = false, // 存储toast显示状态 showLoad = false, // 存储loading显示状态 ...
  • 选择框多选时绑定到数组上 <div id="app"> <select v-model="selected" multiple="multiple" id="" style="width: 50px"> <!-- <option value="">请选择</option>--> <option ...

    选择框多选时绑定到数组上

    <div id="app">
      <select v-model="selected" multiple="multiple" id="" style="width: 50px">
    <!--    <option  value="">请选择</option>-->
        <option value="">a</option>
        <option value="">b</option>
        <option value="">c</option>
      </select>
      <span>selected:{{selected}}</span>
    </div>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                selected:[]
            }
        })
    </script>
    

    此时运行结果为:
    在这里插入图片描述
    不管如何选择,都只会出现[""],原因是数组中出现的值为value值,将value值删除

        <option >a</option>
        <option >b</option>
        <option >c</option>
    

    或者设置value值,则可成功
    在这里插入图片描述

    展开全文
  • 主要介绍了vue的全局提示框组件实例代码,需要的朋友可以参考下
  • 1、使用v-model在select标签上进行数据双向绑定, 2、在data里边添加val:‘ ...以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • vue下拉选择框

    千次阅读 2021-12-28 14:22:51
    vue下拉框

     

     vue下拉选择框,自定义样式,

    这是vue组件

    <template>
      <div class="a">
        <span @click="handleDrop">{{active>-1?list[active].label:"请选择"}}</span>
        <div class="z">
          <ul v-show="visible" >
            <li v-for="(item,index) in list" :class="index===active?'active':''" @click="choose(item,index)" :key="index">
              {{item.label}}
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "mySelect",
      props:['list'],
      data() {
        return {
          visible: false,
          active:-1
        }
      },
      methods: {
        choose(item,index){
          this.visible=false;
          if(this.active!==index){
            this.active=index;
    
            this.$emit("selected",{
              index:index,
              label:item.label,
              value:item.value
            })
          }
    
        },
        handleDrop(){
          this.visible=!this.visible
        },
        outClick(e){
          let dropRef= this.$el
          if(!dropRef.contains(e.target)&&this.visible){
            this.visible=false
          }
        }
      },
    
      mounted(){
        document.addEventListener('click',this.outClick)
      },
      destroyed(){
        document.removeEventListener('click',this.outClick)
      }
    
    }
    </script>
    
    <style scoped>
    .a{
      position: relative;
      width: 200px;
      display: inline-block;
      text-align: center;
      user-select: none;
    
    color: #125165;
    }
    .a>span{
      padding: 10px 20px;
      background-color: lightblue;
      display: block;
      box-shadow: inset 0 0 0 2px #125165;
    
      color:  #125165;
    }
    .z>ul{
      list-style: none;
      margin: 0;
       position: absolute;
      top:10px;
      padding-inline-start: 0;
    
      background-color: lightblue;
      left: 0;
      /*left 不包含border*/
      width: 100%;
      box-shadow: inset 0 0 0 2px #125165;
    
    }
    
    .z>ul>li{
      padding: 10px 0;
    }
    .z{
      position: relative;
    }
    .z>ul>li:hover,div>ul>li.active{
      background-color: #125165;
      color: lightblue;
    }
    </style>
    

    这个是使用方法:

    在引用页使用:

      <my-select2 @selected="useItem2" :list="fruits2"/>

    数据格式:

          fruits2:[
            {
              label:'苹果',
              value:'apple',
              key:'12'
            },
            {
              label:'梨子',
              value:'pear',
              key:'13'
            },
            {
              label:'香蕉',
              value:'banana',
              key:'14'
            },
            {
              label:'橘子',
              value:'orange',
              key:'15'
            },
            {
              label:'柠檬',
              value:'lemon',
              key:'16'
            },
          ],

    接受方法:

    useItem2:function (o){
          console.log(o)
        },

    展开全文
  • 出现了这种情况:成功的消息和失败的消息重叠了(当时没有看出来这种情况) 原因如下图所示,确实是写的重叠了,所以需要删除掉失败的,就能解决这个问题了。这个问题的出现是写这个代码写的有问题。 ....
  • Vue拖动选择器基于Vue.js的选组件示例(演示)安装(install) npm i vue-drag-selector♡(进口) // main.jsimport VueDragSelector from "vue-drag-selector";Vue.use(VueDragSelector);用法(用法) ...
  • oracle大数据(908460)查询使用distinct特慢的情况下可以使用mybatis的去重方法
  • Vue中的确认提示框

    千次阅读 2022-04-13 09:51:22
    弹出确认 this.$confirm("是否确认标记为作废?", "提示", { iconClass: "el-icon-question", //自定义图标样式 confirmButtonText: "确认", //确认按钮文字更换 cancelButtonText: "取消", //取消按钮文字更换 ...
  • VUE显示消息提示框功能

    千次阅读 2021-10-14 15:06:33
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .toast { position: fixed;....
  • vue实现消息提示框

    千次阅读 2020-04-28 23:47:41
    我们常常看到很多vue生态下的ui框架的消息提示框,在页面切换的时候依然停留在页面,我们知道vue这种单页面渐进式框架,所有的操作和元素都是挂载在一个节点上的,当路由变化是整个节点下的dom元素也在重新渲染,若...
  • Vue下拉选择框(Select)

    千次阅读 2021-05-26 10:45:05
    下拉框默认文字(placeholder),默认请选择 是否禁用下拉(disabled),默认false 下拉框宽度(width),默认200px 下拉框高度(height),默认36px 下拉面板最多能展示的下拉项数,超过后滚动显示(num),默认6条
  • 首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from ‘moment’ 结构代码: <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', ...
  • el-checkboxv-model="checked"@change="change">备选项placeholder="请输入内容
  • vue3extend替代方案
  • 自定义确认框和提示框 根据传入的type来判断是确认框或提示框 <template> <transition name="confirm-fade"> <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('...
  • vue显示消息提示框功能

    万次阅读 2019-10-12 11:48:36
    vue显示消息提示框功能 效果图 如下所示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> ....
  • data(){ return{ timeVa:null } }, method:{ //选择时间 dateOnChange(checked) { console.log(`a-date to ${checked}`) this.timeVa = checked } //设置时间选择区域 disabledDate(current) { //设置今天以前不可选...
  • vue项目中,选择性别是用的一个弹出层, 选择 男 <input type=radio name=sex value=男> <li>
  • 为什么选择vue-messsageBox因为我的项目需要一个仅显示一些简单文本的模式,而移动设备上的本机模式很丑陋,所以不是自定义组件。 现场演示https://zhangxiang958.github.io/vue-messageBox/安装npm install --save ...
  • Vue框架

    万次阅读 多人点赞 2021-10-18 19:46:20
    Vue 1、vue概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 110,865
精华内容 44,346
关键字:

vue选择框

友情链接: ANGLE OPEN CLOSE.rar