html vue iview,前端那些事之vue+iview

iview UI或者element UI 实现回车键盘登入系统

绑定事件用 @keyup.enter.native="方法名"

@keyup.enter.native="handleLogin('formLogin')">

import store from '../../store';

export default {

data () {

return {

loading:false,

formLogin: {

username: '',

password: ''

},

ruleLogin: {

username: [

{ required: true, message: '请填写用户名', trigger: 'blur' }

],

password: [

{ required: true, message: '请填写密码', trigger: 'blur' },

{ type: 'string', min: 4, message: '密码长度不能小于6位', trigger: 'blur' }

]

},

}

},

created:function(){

},

methods: {

handleLogin(name) {

this.$refs[name].validate((valid) => {

if (valid) {

this.loading = true;

this.$store.dispatch('Login', this.formLogin).then(response => {

this.loading = false;

this.$router.push({ path: '/space/person' })

},(response)=>{

this.loading = false;

this.$Message.error(response.data.message);

}).catch(err => {

this.loading = false;

});

} else {

this.loading = false;

this.$Message.error('表单验证失败!');

}

})

},

handleReset(name) {

this.loading = false;

this.$refs[name].resetFields();

},

}

}

vue2.0用jsx语法

第一步下载：

npm install\

babel-plugin-syntax-jsx\

babel-plugin-transform-vue-jsx\

babel-helper-vue-jsx-merge-props\

babel-preset-es2015\

--save-dev

第二步在.babelrc添加配置项

{

"presets": ["es2015"],

"plugins": ["transform-vue-jsx"]

}

完整的配置如下：

{

"presets": [

["env", {

"modules": false,

"targets": {

"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

}

}],

"stage-2",

"es2015"

],

"plugins": [

"transform-runtime",

"transform-vue-jsx"

],

"env": {

"test": {

"presets": ["env", "stage-2"],

"plugins": ["istanbul"]

}

}

}

具体用法 ：在vue render涵数中渲染

render:(h,params)=>{

let iconType = params.row.isFile==true ? 'document' : 'folder';

let id = params.row.id;

let name = params.row.name;

let isFile = params.row.isFile;

return(

this.showDetail(id,isFile)} style={{cursor:'pointer'}}>

{(e)=>this.handleResource(id,isFile,e)}>

)

}

iview 中动态引用Dropdown组件无法绑定事件

只能用onOn-click={(name,id)=>this.changeSelected(name,resourceId)}

例如：

return (

{fromInfo}

{

canShare ?

this.getShare(isFile,resourceId,resourceName)}>

:

}

this.changeSelected(name,resourceId)}>

Copy

Move

{canDelete ? Delete : ""}

);