vue如何实现在页面上画画_Vue学习记录-画页面

webstorm

因为之前开发ReactNative的时候，选择了webstorm，这回转战Vue，自然还是用它。如果什么也不做的话，打开Vue工程，编辑区域基本上没有语法高亮。怎么办呢？

安装插件(以mac版本为例，window下面应该大同小异)

1. 打开偏好设置，从左边找到Plugins

2. 点击Browse repositories...，然后搜索Vue，进行安装

3. 添加Vue模板

name:''}

4. 重启webstorm，准备工作到此结束

项目结构

配置路由，根路径显示Login

import Vue from 'vue'import Router from'vue-router'import Login from'@/modules/Login'Vue.use(Router)

exportdefault newRouter({

routes: [

{

path:'/',

name:'Login',

component: Login

}

]

})

编写Login.vue

先把代码贴一下，过程慢慢看





登 录

import {Field, Button, Radio} from 'mint-ui';

import checkbox from '../components/checkbox.vue'

export default {

name: 'login',

components: {

'v-input': Field,

Button,

checkbox,

},

data: function () {

return {

remember_password: false,

}

},

methods:{

onPressRememberPassword: function () {

this.remember_password = !this.remember_password;

}

}

}

#container {

width: 100%;

height: 100%;

/*background-image: url("../assets/bgd_login.jpg") ;*/

}

#background-container {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

z-index: 0;

}

#main {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

z-index: 1;

background-color: transparent;

}

#background-image {

width: 100%;

height: 100%;

z-index: 1;

}

#logo {

text-align: center;

vertical-align: center;

margin-top: 50px;

}

#logo-img {

width: 100px;

height: 100px;

}

.form-input {

background-color: white;

margin-top: 20px;

}

.input-icon {

margin-left: 15px;

color: gray;

}

.input {

background-color: transparent;

line-height: 60px;

border: none;

outline: none;

font-size: 16px;

color: white;

margin-left: 5px;

width: 70%;

}

.form-input-password {

margin-top: 1px;

}

#setting {

margin-top: 20px;

margin-left: 10px;

}

#login-button {

margin-top: 55px;

padding: 0px 15px;

}

过程1：怎么让一个图片作为背景颜色

iOS原生开发：

方案1：图片作为view的backgroundcolor；

方案2：一个UIImageView同时位于.subviews[0]；

ReactNative开发：

方案1：作为容器，将其他部分作为childrens；

方案2：通过positon、zIndex将图片压到最底层；

Vue方案：

方案1：作为div的背景图片，但是最后我没有解决图片的拉伸问题；

方案2：将背景图单独一个div，其他内容单独一个div，然后通过zIndex压到最后

#main{ /* 其他内容所在的div，包括输入框、忘记密码、登录按钮 */position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:1;background-color:transparent;

}#background-image{ /*背景图所在的div*/width:100%;height:100%;z-index:1;

}

过程2：输入框，怎么让input撑满剩余部分呢

在ReactNative里面，可以通过flex:1，让一个组件撑满，放到div/css里面，我就不知道怎么处理了。因为暂时不影响使用，只是简单的做了处理



.input{background-color:transparent;line-height:60px;border:none;outline:none;font-size:16px;color:white;margin-left:5px;width:70%;

}

过程3：“记住密码”，能不能做个单独的组件，方便以后复用

{{title}}

name:'checkbox',

props: ['title', 'checked'],

data:function() {return{

}

},

computed: {

iconImage:function() {

const icon= this.checked? require('../components/images/checkbox_on.png')

: require('../components/images/checkbox_no.png');returnicon;

}

},

methods: {

press:function() {this.$emit('press');

},

}

}

width: 20px;

height: 20px;float: left;

}

.comp-checkbox-title {

margin-left: 10px;

}

问题a. 如何让显示的文本，从父组件传过来显示呢？

问题b. 如何将点击事件交给父组件处理呢？

问题c. 如何判断显示的图片(选中/非选中)呢？

(答案：通过computed计算返回，同时对于img这种特殊的标签，应该用require进行返回)

问题d. 组件写好了，应该怎么用呢？

(答案：父组件里面，import引入，注册到components里，然后就可以使用了)

OK，UI部分到此结束，下面的“接口通信”，预知后事如何，待我娓娓道来