gulu-vue2
Version:
用 Vue2 做的 UI 框架
1 lines • 3.67 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{237:function(e,n,t){},239:function(e,n,t){"use strict";t(237)},240:function(e,n,t){"use strict";var o={name:"GIcon",props:{name:{type:String,required:!0}},mounted(){const e=document.querySelector("script[data-ref]");if(e&&"iconScript"===e.dataset.ref)return;const n=document.createElement("script");n.src="//at.alicdn.com/t/font_718972_a5614fly5or.js",n.dataset.ref="iconScript",document.body.append(n)}},u=(t(239),t(14)),r=Object(u.a)(o,(function(){var e=this._self._c;return e("svg",{class:["g-icon",{loading:"loading"===this.name}],attrs:{"aria-hidden":"true"}},[e("use",{attrs:{"xlink:href":"#i-"+this.name}})])}),[],!1,null,"241b5f01",null);n.a=r.exports},276:function(e,n,t){},314:function(e,n,t){"use strict";t(276)},326:function(e,n,t){"use strict";t.r(n);var o={name:"GInput",components:{"g-icon":t(240).a},props:{value:{type:String},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},error:{type:String}}},u=(t(314),t(14)),r={name:"Input-demos",components:{"g-input":Object(u.a)(o,(function(){var e=this,n=e._self._c;return n("div",{staticClass:"input-wrapper"},[n("input",{class:{error:e.error},attrs:{type:"text",disabled:e.disabled,readonly:e.readonly},domProps:{value:e.value},on:{input:function(n){return e.$emit("input",n.target.value)},change:function(n){return e.$emit("change",n.target.value)},focus:function(n){return e.$emit("focus",n.target.value)},blur:function(n){return e.$emit("blur",n.target.value)}}}),e._v(" "),e.error?[n("g-icon",{staticClass:"error-icon",attrs:{name:"error"}}),e._v(" "),n("span",{staticClass:"error-message"},[e._v(e._s(e.error))])]:e._e()],2)}),[],!1,null,"551902b9",null).exports},data:()=>({message:"你好世界",code1:'<g-input value="张三" :disabled="true"></g-input>',code2:'<g-input value="张三" :readonly="true"></g-input>',code3:'<g-input value="张三" error="错误"></g-input>',code4:'\n <g-input value="input事件" @input="onInput"></g-input>\n <g-input value="change事件" @change="onChange"></g-input>\n <g-input value="focus事件" @focus="onFocus"></g-input>\n <g-input value="blur事件" @blur="onBlur"></g-input>\n '.replace(/^ {8}/gm,"").trim(),code5:'<g-input v-model="message"></g-input>'}),methods:{onInput(e){console.log(e)},onChange(e){console.log(e)},onFocus(e){console.log(e)},onBlur(e){console.log(e)}}},a=Object(u.a)(r,(function(){var e=this,n=e._self._c;return n("div",[n("section",[n("p",[e._v("禁用")]),e._v(" "),n("g-input",{attrs:{value:"张三",disabled:!0}}),e._v(" "),n("pre",[n("code",[e._v(e._s(e.code1))])])],1),e._v(" "),n("section",[n("p",[e._v("只读")]),e._v(" "),n("g-input",{attrs:{value:"张三",readonly:!0}}),e._v(" "),n("pre",[n("code",[e._v(e._s(e.code2))])])],1),e._v(" "),n("section",[n("p",[e._v("错误提示")]),e._v(" "),n("g-input",{attrs:{value:"张三",error:"错误"}}),e._v(" "),n("pre",[n("code",[e._v(e._s(e.code3))])])],1),e._v(" "),n("section",[n("p",[e._v("事件")]),e._v(" "),n("g-input",{attrs:{value:"input事件"},on:{input:e.onInput}}),e._v(" "),n("g-input",{attrs:{value:"change事件"},on:{change:e.onChange}}),e._v(" "),n("g-input",{attrs:{value:"focus事件"},on:{focus:e.onFocus}}),e._v(" "),n("g-input",{attrs:{value:"blur事件"},on:{blur:e.onBlur}}),e._v(" "),n("pre",[n("code",[e._v(e._s(e.code4))])])],1),e._v(" "),n("section",[n("p",[e._v("双向绑定")]),e._v(" "),n("g-input",{model:{value:e.message,callback:function(n){e.message=n},expression:"message"}}),e._v(" "),n("span",[e._v(e._s(e.message))]),e._v(" "),n("pre",[n("code",[e._v(e._s(e.code5))])])],1)])}),[],!1,null,"72736911",null);n.default=a.exports}}]);