菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vue.js 文本编辑</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <style> /* 隐藏未编译的变量 */ [v-cloak] {display:none;} *{margin:0;padding:0;} body{font:15px/1.3 'Open Sans', sans-serif;color:#5e5b64;text-align:center;} a, a:visited {outline:none;color:#389dc1;text-decoration:none;} section, footer, header, aside, nav{display:block;} /*---编辑框--*/ .tooltip{background-color:#5c9bb7; background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad); background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad); background-image:linear-gradient(top, #5c9bb7, #5392ad); box-shadow:0 1px 1px #ccc; border-radius:3px; width:290px; padding:10px; position:absolute; left:50%; margin-left:-150px; top:80px; } .tooltip:after{/* 提示信息 */ content:''; position:absolute; border:6px solid #5190ac; border-color:#5190ac transparent transparent; width:0; height:0; bottom:-12px; left:50%; margin-left:-6px; } .tooltip input{border:none;width:100%;line-height:34px;border-radius:3px;box-shadow:0 2px 6px #bbb inset;text-align:center;font-size:16px;font-family:inherit; color:#8d9395;font-weight:bold;outline:none;} p{font-size:22px;font-weight:bold;color:#6d8088;height:30px;cursor:default;} p b{color:#ffffff;display:inline-block;padding:5px 10px;background-color:#c4d7e0;border-radius:2px;text-transform:uppercase;font-size:18px;} p:before{content:'✎';display:inline-block;margin-right:5px;font-weight:normal;vertical-align:text-bottom;} #main{height:300px;position:relative;padding-top:150px;} </style> </head> <body> <!-- v-cloak 隐藏未编译的变量 直到 Vue 实例准备就绪 --> <!-- 元素点击后 hideTooltp() 方法被调用 --> <div id="main" v-cloak v-on:click="hideTooltip"> <!-- 提示框v-on:clock.stop 是 点击事件处理器 stop 修饰符 阻止事件传递v-if 判断 show_tooltip 为 true 时才显示 --> <div class="tooltip" v-on:click.stop v-if="show_tooltip"> <!-- v-model 绑定 文本域的内容 改变时 对应的变量 实时改变 --> <input type="text" v-model="text_content" /> </div> <!-- 点击 调用 toggleTooltip 方法 阻止事件传递 --> <!-- text_content 变量根据文本域内容的变化而变化 --> <p v-on:click.stop="toggleTooltip">{{text_content}}</p> </div> <script> var demo = new Vue({ el:'#main', data:{show_tooltip:false, text_content:'仰天大笑出门去,我辈岂是蓬蒿人。'}, methods:{hideTooltip:function(){/* 模型改变 视图 自动更新*/ this.show_tooltip = false; }, toggleTooltip:function(){ this.show_tooltip = !this.show_tooltip; } } }) </script> </body> </html>
运行结果