精华内容
下载资源
问答
  • 基于vue的颜色选择器vue-color-picker

    千次阅读 2017-08-01 15:57:00
    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功能去引入这么大的依赖库吗? ...

    项目中有用到颜色选择器的童鞋们可以看过来了

    关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到,

    虽然element-ui里面有这个,但是你愿意为了一个小功能去引入这么大的依赖库吗?

    适用于:想写基于vue的单个color-picker功能的童鞋

    甩github地址啦:https://github.com/alexzaolin/vue-color-picker

    (麻烦觉得有用的童鞋帮我点个star,谢谢谢谢谢~~)

    凑个字数贴一下代码(部分算法来自网络):

    <template lang="html">
    <div>
        <div class="color-picker-container" :id="containerId" :class="{'active':isShowPicker}">
            <div class="color"></div>
            <div class="wheel"></div>
            <div class="overlay"></div>
            <div class="h-marker marker"></div>
            <div class="sl-marker marker"></div>
        </div>
    </div>
    </template>
    
    <script>
    /**
     * author : alex 
     * email : 961163829@qq.com
     */
    export default {
        props:{
            /*由父组件传递的默认颜色*/
            defaultColor:{
                type:String,
                default:"#000000"
            },
            /*目标元素,可以是input框或者按钮等*/
            targetElem:null
        },
        data(){
            return {
                isShowPicker:false,
                wheel:document.querySelector('.wheel'),
                color:this.defaultColor,
                containerId:"color-picker-container",
                dom:{
                    hMarker:null,
                    slMarker:null,
                    color:null,
                    targetElem:null,
                    container:null
                },
                radius:84,
                square:100,
                width:194
            }
        },
        mounted(){
    
            this.dom.container=document.querySelector('#'+this.containerId);
            this.dom.hMarker=document.querySelector('.h-marker');
            this.dom.slMarker=document.querySelector('.sl-marker');
            this.dom.color=document.querySelector('.color');
            this.dom.targetElem=document.querySelector(this.targetElem);
    
    
            this.init();
        },
        methods:{
            init:function(){
                var self = this;
                self.posInit();
                self.eventBind();
    
                  // Init color
                self.setColor(self.color);
            },
            openPicker:function(){
                var self = this;
                this.isShowPicker = true;
                this.wheel=document.querySelector('.wheel');
                /*色盘打开的时候绑定点击事件*/
                document.addEventListener("click",self.documentClick);
            },
            closePicker:function(){
                this.isShowPicker = false;
                /*色盘关闭的时候解绑事件*/
                document.removeEventListener("click",this.documentClick);
            },
            eventBind:function(){
                var self = this;
                self.dom.container.addEventListener("mousedown",self.mousedown);
            },
            documentClick:function(e){
                /*你可能不需要关闭色盘,那这个方法也是可以不需要的*/
                var parents1 = this.getParents(e,this.dom.container,true);;
                var parents2 = this.getParents(e,this.dom.targetElem,true);
                if(parents1.length===0&&parents2.length===0){
                    this.closePicker();
                }
            },
            posInit:function(){
                /*色盘的位置计算*/
                var target = this.dom.targetElem;
    
                var top = this.getElementViewTop(target);
                var left = this.getElementViewLeft(target);
    
                this.dom.container.style.position = "fixed";
                this.dom.container.style.top = (top)+'px';
                
                this.dom.container.style.left = (left + this.dom.targetElem.offsetWidth)+'px';
                
            },
            getElementViewLeft:function(element){
                /*获取元素距离视窗左部距离*/
            var actualLeft = element.offsetLeft;
            var current = element.offsetParent;
    
            while (current !== null){
              actualLeft += current.offsetLeft;
              current = current.offsetParent;
            }
    
            if (document.compatMode == "BackCompat"){
              var elementScrollLeft=document.body.scrollLeft;
            } else {
              var elementScrollLeft=document.documentElement.scrollLeft; 
            }
    
            return actualLeft-elementScrollLeft;
          },
            getElementViewTop:function(element){
                /*获取元素距离视窗顶部距离*/
            var actualTop = element.offsetTop;
            var current = element.offsetParent;
    
            while (current !== null){
              actualTop += current. offsetTop;
              current = current.offsetParent;
            }
    
            if (document.compatMode == "BackCompat"){
              var elementScrollTop=document.body.scrollTop;
            } else {
              var elementScrollTop=document.documentElement.scrollTop; 
            }
    
            return actualTop-elementScrollTop;
          },
            getParents:function(e,parent,andSelf){
                /*获取祖先节点,返回一个数组*/
                var target = e.target;
                var parent = typeof parent==='string'?document.querySelector(parent):parent;
    
                var curTarget = target;
    
                var arr = typeof andSelf === "undefined"?[curTarget]:[];
                var result = [];
                
                while(true){
                    if((typeof parent !== 'undefined'&&curTarget == parent)||
                        typeof parent === 'undefined'&&curTarget.nodeType===9){
                        arr.push(curTarget);
                        break;
                    }
                    if(!!curTarget){arr.push(curTarget)}
    
                    if(!!curTarget.parentNode){
                        curTarget = curTarget.parentNode
                    }else{
                        break;
                    }
                }
                if(!!parent){
                    return arr.indexOf(parent)>-1?arr:[];
                }else{
                    return arr;
                }
            },
            getParent:function(e){
                /*获取父节点*/
                return e.target.nodeType!==9&&e.target.parentNode;
            },
            /**
             * 以下为组件内部函数
             * 算法来自网络
             */
            updateValue:function (event) {
                var self = this;
    
                var that = event.target;
                if (that.value && that.value != self.color) {
                    self.setColor(that.value);
                }
              },
            /**
            * Change color with HTML syntax #123456
            */
            setColor:function (color) {
                var self = this;
                var unpack = self.unpack(color);
                if (self.color != color && unpack) {
    
                    self.color = color;
                    self.rgb = unpack;
                    self.hsl = self.RGBToHSL(self.rgb);
                    self.updateDisplay();
                }
            },
            /**
            * Change color with HSL triplet [0..1, 0..1, 0..1]
            */
            setHSL:function (hsl) {
                var self = this;
                self.hsl = hsl;
                self.rgb = self.HSLToRGB(hsl);
                self.color = self.pack(self.rgb);
                self.updateDisplay();
            },
            /**
            * Retrieve the coordinates of the given event relative to the center
            * of the widget.
            */
              widgetCoords:function (event) {
                var self = this;
                var x, y;
                var el = event.target || event.srcElement;
                var reference = self.wheel;
                
                if (typeof event.offsetX != 'undefined') {
                  // Use offset coordinates and find common offsetParent
                  var pos = { x: event.offsetX, y: event.offsetY };
    
                  // Send the coordinates upwards through the offsetParent chain.
                  var e = el;
                  while (e) {
                    e.mouseX = pos.x;
                    e.mouseY = pos.y;
                    pos.x += e.offsetLeft;
                    pos.y += e.offsetTop;
                    e = e.offsetParent;
                  }
    
                  // Look for the coordinates starting from the wheel widget.
                  var e = reference;
                  var offset = { x: 0, y: 0 }
                  while (e) {
                    if (typeof e.mouseX != 'undefined') {
                      x = e.mouseX - offset.x;
                      y = e.mouseY - offset.y;
                      break;
                    }
                    offset.x += e.offsetLeft;
                    offset.y += e.offsetTop;
                    e = e.offsetParent;
                  }
    
                  // Reset stored coordinates
                  e = el;
                  while (e) {
                    e.mouseX = undefined;
                    e.mouseY = undefined;
                    e = e.offsetParent;
                  }
                }
                else {
                  // Use absolute coordinates
                  var pos = self.absolutePosition(reference);
                  x = (event.pageX || 0*(event.clientX + document.documentElement.scrollLeft)) - pos.x;
                  y = (event.pageY || 0*(event.clientY + document.documentElement.scrollTop)) - pos.y;
                }
                // Subtract distance to middle
                return { x: x - self.width / 2, y: y - self.width / 2 };
            },
            /**
            * Mousedown handler
            */
            mousedown:function (event) {
                var self = this;
                if (!document.dragging) {
                    document.documentElement.addEventListener('mousemove', self.mousemove);
                    document.documentElement.addEventListener('mouseup', self.mouseup);
                    document.dragging = true;
                }
    
                // Check which area is being dragged
                var pos = self.widgetCoords(event);
                self.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > self.square;
    
                // Process
                self.mousemove(event);
                return false;
            },
            /**
            * Mousemove handler
            */
            mousemove:function (event) {
                var self = this;
            // Get coordinates relative to color picker center
                var pos = self.widgetCoords(event);
    
                // Set new HSL parameters
                if (self.circleDrag) {
                var hue = Math.atan2(pos.x, -pos.y) / 6.28;
                if (hue < 0) hue += 1;
                    self.setHSL([hue, self.hsl[1], self.hsl[2]]);
                }
                else {
                    var sat = Math.max(0, Math.min(1, -(pos.x / self.square) + .5));
                    var lum = Math.max(0, Math.min(1, -(pos.y / self.square) + .5));
                    self.setHSL([self.hsl[0], sat, lum]);
                }
                return false;
            },
            /**
            * Mouseup handler
            */
            mouseup:function () {
                var self = this;
                // Uncapture mouse
                document.documentElement.removeEventListener('mousemove', self.mousemove);
                document.documentElement.removeEventListener('mouseup', self.mouseup);
                document.dragging = false;
            },
            /**
            * Update the markers and styles
            */
            updateDisplay:function () {
                var self = this;
                // Markers
                var angle = self.hsl[0] * 6.28;
                
                self.dom.hMarker.style.left = Math.round(Math.sin(angle) * self.radius + self.width / 2) + 'px';
                self.dom.hMarker.style.top = Math.round(-Math.cos(angle) * self.radius + self.width / 2) + 'px';
    
                self.dom.slMarker.style.left = Math.round(self.square * (.5 - self.hsl[1]) + self.width / 2) + 'px';
                self.dom.slMarker.style.top = Math.round(self.square * (.5 - self.hsl[2]) + self.width / 2) + 'px';
    
                // Saturation/Luminance gradient
                self.dom.color.style.backgroundColor = self.pack(self.HSLToRGB([self.hsl[0], 1, 0.5]));
    
    
                // important
                // 将获取到的最新的color值emit出去
                self.$emit("onChange",self.color);
                //self.dom.targetElem.style.backgroundColor = self.color;
                //self.dom.targetElem.style.color = self.hsl[2] > 0.5 ? '#000' : '#fff';
    
                // Change linked value
                // if (self.dom.targetElem.value && self.dom.targetElem.value != self.color) {
                //     self.dom.targetElem.value = self.color;
                // }
            },
            /**
            * Get absolute position of element
            */
            absolutePosition:function (el) {
                var self = this;
                var r = { x: el.offsetLeft, y: el.offsetTop };
                // Resolve relative to offsetParent
                if (el.offsetParent) {
                    var tmp = self.absolutePosition(el.offsetParent);
                    r.x += tmp.x;
                    r.y += tmp.y;
                }
                return r;
            },
            /* Various color utility functions */
            pack:function (rgb) {
                var r = Math.round(rgb[0] * 255);
                var g = Math.round(rgb[1] * 255);
                var b = Math.round(rgb[2] * 255);
                return '#' + (r < 16 ? '0' : '') + r.toString(16) +
                             (g < 16 ? '0' : '') + g.toString(16) +
                             (b < 16 ? '0' : '') + b.toString(16);
            },
            unpack:function (color) {
                if (color.length == 7) {
                    return [parseInt('0x' + color.substring(1, 3)) / 255,
                            parseInt('0x' + color.substring(3, 5)) / 255,
                            parseInt('0x' + color.substring(5, 7)) / 255];
                }
                else if (color.length == 4) {
                    return [parseInt('0x' + color.substring(1, 2)) / 15,
                            parseInt('0x' + color.substring(2, 3)) / 15,
                            parseInt('0x' + color.substring(3, 4)) / 15];
                }
            },
            HSLToRGB:function (hsl) {
                var m1, m2, r, g, b;
                var h = hsl[0], s = hsl[1], l = hsl[2];
                m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
                m1 = l * 2 - m2;
                return [this.hueToRGB(m1, m2, h+0.33333),
                        this.hueToRGB(m1, m2, h),
                        this.hueToRGB(m1, m2, h-0.33333)];
            },
            hueToRGB:function (m1, m2, h) {
                h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
                if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
                if (h * 2 < 1) return m2;
                if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
                return m1;
            },
            RGBToHSL:function (rgb) {
                var min, max, delta, h, s, l;
                var r = rgb[0], g = rgb[1], b = rgb[2];
                min = Math.min(r, Math.min(g, b));
                max = Math.max(r, Math.max(g, b));
                delta = max - min;
                l = (min + max) / 2;
                s = 0;
                if (l > 0 && l < 1) {
                    s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
                }
                h = 0;
                if (delta > 0) {
                    if (max == r && max != g) h += (g - b) / delta;
                    if (max == g && max != b) h += (2 + (b - r) / delta);
                    if (max == b && max != r) h += (4 + (r - g) / delta);
                    h /= 6;
                }
                return [h, s, l];
            }
        }
    }
    </script>
    
    <style lang="css" scoped>
    .color-picker-container {
        position: fixed;
        display: none;
      
    }
    .color-picker-container.active{
        display: block;
    }
    .color-picker-container * {
        position: absolute;
        cursor: crosshair;
    }
    .color-picker-container, .color-picker-container .wheel {
        width: 195px;
        height: 195px;
    }
    .color-picker-container .color, .color-picker-container .overlay {
        top: 47px;
        left: 47px;
        width: 101px;
        height: 101px;
    }
    .color-picker-container .wheel {
        width: 195px;
        height: 195px;
        background: url(./images/wheel.png) no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
    }
    .color-picker-container .overlay {
        background: url(./images/mask.png) no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
    }
    .color-picker-container .marker {
        width: 17px;
        height: 17px;
        margin: -8px 0 0 -8px;
        overflow: hidden;
        background: url(./images/marker.png) no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
    }
    </style>

     

    转载于:https://www.cnblogs.com/AlexBlogs/p/7268989.html

    展开全文
  • vue滑动选择器(一键开启时间选择器)

    千次阅读 2019-06-06 14:59:23
    vue滑动选择器(一键开启时间选择器) 直接上demo npm i time_check_jiangji 之后直接用 <template> <div class="A"> <div @click="showFn">开</div> <Time v-if="show" :arr=...

    vue滑动选择器(一键开启时间选择器)

    一个vue的滑动选择器(移动端和PC端都能使用)

    先来张效果图

    1

    安装 npm install time_check_jiangji

    引入 import Time from ‘time_check_jiangji’

    直接上干货,demo

    <template>
      <div class="App">
        <div @click="timeShow = true">点击显示Time组件</div>
        <Time v-if="timeShow" :cancleFn="cancleFn" :time="true" :defaultValue="[2019, 6, 5, '上午', '随便2']"  :arr="[['上午', '下午'], ['随便1', '随便2']]" @click="clickFn" :arrayFirstdayAndLastday="['2012.6.8', '2019.6.10']" :stylBtn="{'color': '#00ffff'}" />
      </div>
    </template>
    
    <script>
    import Time from 'time_check_jiangji'
    export default {
      name: 'App',
      components: {
        Time
      },
      data() {
        return {
          timeShow: true
        };
      },
      methods: {
        clickFn (e) {
          console.log(e)
          this.timeShow = false
        },
        cancleFn () {
          console.log('取消')
          this.timeShow = false
        }
      }
    };
    </script>
    

    下面再来一个说明

    @click="clickFn"
    是点击确认按钮的触发的函数 接受一个参数(数组类型),是当前的值
    (例如[2019, 6, 5, "上午", "随便2"])
    
    :cancleFn="cancleFn"  (特别注意,是:cancleFn不是@cancleFn,是: 不是@)
    是点击取消按钮触发的函数,不传则不显示取消按钮(非必传)
    
    :defaultValue="[2019, 6, 5, "上午", "随便2"]"
    是回显值(一维数组,非必传,传了能回显)  数据类型注意要对应上
    
    :time="true"
    开启年月日的时间选择模式(只能选择三年内的日期,非必传)
    
    :arr="[['上午', '下午'], ['随便1', '随便2']]"
    传入二维数组(非必传)
    如果:time="true" 那么前三列是时间(年月日),第四列是['上午', '下午'],第五列是['随便1', '随便2']
    如果:time="false"或者未传, 第1列是['上午', '下午'],第2列是['随便1', '随便2']
    
    :arrayFirstdayAndLastday="['2016.6-8', '2019-6.10']" (日期用逗号(.)或者一杠(-)隔开都行)
    arrayFirstdayAndLastday是一维数组,数组长度必须是2,数组长度必须是2,数组长度必须是2
    第一项是最早的显示时间,第二项是最晚的显示时间
    ['2016.6.8', '2019.6.10'] 那么最早显示时间是201668号,最晚时间是2019610:stylBtn="{'color': '#00ffff'}"
    是按钮这一栏的行内样式
    
    

    附上github地址 https://github.com/jiangji1/time_check_jiangji

    展开全文
  • antd vue时间选择器(年选择器

    千次阅读 2020-08-31 23:46:30
    antd vue时间选择器(年选择器) 最近项目中用到了antd vue,项目中的版本是1.5.2版本,在做日期选择器时发现只有日,周,月份选择器,独独缺少年份选择器,如果你的项目也是怕升级对整体影响太多,不妨试试下面这种...

    antd vue时间选择器(年选择器)

    最近项目中用到了antd vue,项目中的版本是1.5.2版本,在做日期选择器时发现只有日,周,月份选择器,独独缺少年份选择器,如果你的项目也是怕升级对整体影响太多,不妨试试下面这种方式来达到年份选择效果。
    HTML:

    	<div>
    	  <a-date-picker
    	    format="YYYY"
    	    mode="year"
    	    :value="year"
    	    :open="open"
    	    @openChange="openChange"
    	    @panelChange="panelChange"
    	  />
    	</div>
    

    JS:

    <script>
    import moment from "moment"
    export default {
      components: { moment },
     	data() {
        return {
          open: false,
          year: moment(),
        };
      },
      	methods: {
    	    moment,
    	    //Ant Design封装年份选择组件
    	    openChange(status) {
    	      if (status) {
    	        this.open = true;
    	      } else {
    	        this.open = false;
    	      }
    	    },
    	    panelChange(value){
    	      this.year = value;
    	      this.open = false;
    	    },
     	}
     }
    

    看效果:
    在这里插入图片描述

    更新日志
    目前官网更新的1.6.3版本中说已解决了这个问题,大家可以试试。

    展开全文
  • vue插件颜色选择器

    万次阅读 热门讨论 2019-05-30 11:11:35
    1.vcolorpicker使用方法 官方地址:http://vue-color-picker.rxshc.com/ ...// 颜色选择器 import vcolorpicker from 'vcolorpicker' Vue.use(vcolorpicker) <!--system.vue--> <template> <...

    1.vcolorpicker使用方法

    官方地址:http://vue-color-picker.rxshc.com/
    图例:

    在这里插入图片描述

    /* main.js */
    // 颜色选择器
    import vcolorpicker from 'vcolorpicker'
    Vue.use(vcolorpicker)
    
    <!--system.vue-->
    <template>
          <colorPicker v-model="color" @change="handleChangeColor"></colorPicker>
    </template>
    <script>
    export default {
      name: 'system',
      data () {
        return {
          color: #000;
        }
      },
      methods:{
       handleChangeColor (val) {
          console.log('输出颜色值',val)  // 颜色 #6c8198
       },
      }
    </script>
    

    2.vue-color使用方法

    安装地址:https://www.npmjs.com/package/vue-color
    图例:

    在这里插入图片描述这里只介绍怎么使用Sketch,其他的照摸样画葫芦

    网页截图:

    在这里插入图片描述

    功能介绍:

    点击左边颜色块,可打开关闭颜色选择器

    <!-- system.vue-->
    <template>
          <section>
             <div class="color_con" :style="{background:color}" @click="handleShowColor"></div>
                  <div v-show="colorShow">
                  <sketch-picker v-model="tableData.color" @input="updateValue"></sketch-picker>
             </div>
         </section>
    </template>
    <script>
    import { Sketch } from 'vue-color'
    export default {
      name: 'system',
      components: {
        'sketch-picker': Sketch
      },
      data () {
        return {
          color: #000;
          // 颜色选择器
          colorShow: false,
          colors: {
            hex: '#194d33',
            hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
            hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
            rgba: { r: 25, g: 77, b: 51, a: 1 },
            a: 1
          }
        }
      },
      methods:{
       // 颜色选择器
        handleShowColor () {
          if (this.colorShow) {
            this.colorShow = false
          } else {
            this.colorShow = true
          }
        },
        updateValue (val) {
          console.log('颜色选择', val) // 输出参数如下图1-1
          this.color = val.hex
        },
      }
    </script>
    
    截图

    图1-1
    图1-1

    有错请指正!!!
    展开全文
  • vue移动端 地址选择器

    千次阅读 2019-06-12 18:36:47
    1.组件address.vue <template> <div> <div class="addresSelectVal"> <ul> <li v-for="(item,index) of addressVal" :key="index" ...
  • vue- cli 项目中安装官方文档链接 npm ( 后面内容需要在控制台终端输入) # 通过 npm 安装 npm i vant -S 自动按需引入组件:babel-plugin-import是一款 babel 插件,它会在编译过程中将 import 的写法自动...
  • 由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器,原理很简单,不多说,直接上...
  • vue时间段选择器

    千次阅读 2019-10-31 08:58:44
    vue时间段选择器实现的功能![在这里插入图片描述](https://img-blog.csdnimg.cn/20191031084355506.gif)代码心得 实现的功能 可以添加和取消时间段,需要把选中的时间段数组再转成适合人看的格式. 代码 没有整理和...
  • 其中,用到的组件有两个,一个是城市选择器element-china-area-data,另外一个是日期选择器vue-datepicker 接下来介绍一下这两个选择器的使用,github地址已经在上面标明了,点击组件的名字即可抵达。 一、城市选择...
  • vue 组件标签里面套组件 Vue标签选择器 (vue-tag-selector) A simple tag selector as a vue component. 一个简单的标签选择器作为vue组件。 Vue-tag-selector is a component for vuejs for tag type fields. ...
  • vue项目时间选择器

    2020-07-17 15:24:56
    vue项目时间选择器设置结束时间不能早于开始时间,开始时间不能晚于结束时间html里面:js里面 设置结束时间不能早于开始时间,开始时间不能晚于结束时间 html里面: <el-form-item label="发布时间:"> <div ...
  • vue移动端滚动选择器的实现

    千次阅读 2019-07-20 21:09:17
    前两天在公司用vue开发移动端的项目,遇到一个功能,要求弹出一个选择器,默认选中中间的值,要求选中的值跟着滚动改变,由于没有外网,只能自己开发一个来实现这个需求。第一次写博客,写的不好,勿喷~ 代码如下: ...
  • 通过引入el-color-picker后, ...div> <div> <h3> 属性设置: </h3> </div> <div style="margin-top:20px;margin-left:20px;"> <div style="display:flex;align-items
  • vue-picker的组件,囊括了(普通选择、联动选择、中国地址选择)等等常见的picker,兼容PC、移动端,通过简单配置就可以出现一个强大的picker,感受下效果图。 Demo(快点去复制代码体验一波吧) Install npm install ...
  • vue多个元素的样式选择器 三目运算符只能进行两个的选择判断,多个选择就很难受了。 废话少说,直接上源码。 首先获取它的索引,通过索引来判断样式 // 索引key判断 <div class="carborder" v-for="(value, ...
  • vue实现农历日期选择器

    千次阅读 2019-11-07 13:49:05
    经过加工分析封装成了一个vue组件。 实现公农历转换的算法 /** * 数组LunarDaysOfMonth存入农历1901年到2050年每年中的月天数信息 * 农历每月只能是29或30天,一年用12(或13)个二进制位表示,从高到低,对应位...
  • 实际项目中我们获取选择的数据的id;这时候 需要配合使用v-bind,才能获取到选择的那条数据的id值,其实就是id赋值给value属性 <div> <select v-model=select > (a,index) key=index value=a.id>{{ a....
  • 三目运算符只能进行两个的选择判断,多个选择就很难受了。 废话少说,直接上源码。 首先获取它的索引,通过索引来判断样式 // 索引key判断 <div class=carborder v-for=(value, key=key> [key] to=/payment > 我...
  • 要完成的功能是,通过时间筛选可以得出每个时间端的数据,页面引用的组件是vant的Picker 选择器: 首先,前端方面,引入这个选择器组件(可以跟弹出层的组件搭配---Popup 弹出层) &lt;div class="col-xs-3&...
  • vue3-文件选择器 Vue 3无头文件选择器组件。 如何使用 该库包括一些用于拖放支持的文件选择器的无头组件。 这是零件: FileSelector :需要使用的主容器 Dropzone :处理拖放逻辑,不需要使用 DialogButton :无需...
  • Vue拖动选择器 基于Vue.js的框选组件 示例(演示) 安装(install) npm i vue-drag-selector ♡(进口) // main.js import VueDragSelector from "vue-drag-selector"; Vue.use(VueDragSelector); 用法(用法) ...
  • vue滚动年月日选择器DatetimePicker

    千次阅读 2019-11-27 17:02:42
    一、首先引入mint-UI库,具体步骤参考mint-ui官方文档 mint-ui地址:...二、查看引入DatetimePicker步骤 具体代码如下: <template> <div>...div class="birth">...div @click="openPicke...
  • 主要介绍了Vue Element 分组+多选+可搜索Select选择器实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 时间选择器组件

    2018-06-20 11:25:00
    vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为computed计算属性中得到的值 focus调用初始化日期方法--> <input type="text" ...
  • vue项目中使用颜色选择器

    千次阅读 2020-08-21 17:32:15
    颜色选择器引言type类型为color的inputelementUI中...,一个是elementUI中的ColorPicker组件,一个是基于Vue的颜色选择器插件vcolorpicker type类型为color的input elementUI中的ColorPicker组件 vcolorpicker插件 ...
  • weex-area-pick 基于 alibaba 的weex-ui中的wxc-popup,wxc-overlay 组件开发的三级地址选择器, 感谢weex-ui的开发团队辛苦开源weex-ui。 安装 npm i weex-area-pick 示例图 使用方法 <template> ...
  • Vue日期时间选择器组件

    千次阅读 2020-04-28 11:32:16
    单选日期选择器 多选日期选择器 日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": th...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,881
精华内容 8,752
关键字:

div选择器vue

vue 订阅