VUE3 + Typescript 与原生ES10 CSS

最新推荐文章于 2023-07-17 10:10:27 发布

phone13144830339

最新推荐文章于 2023-07-17 10:10:27 发布

阅读量261

点赞数

本文链接：https://blog.csdn.net/phone13144830339/article/details/119681472

版权

框架加快了开发速度，一个活几年的项目随着框架自身架构变更和历史束缚限制了灵活性增加了维护难度，查找和处理BUG的难度

<html>
   <head>
       <style>
           body {
           margin: 0;
           }

           :root {
               --font-size: 12px; /* 12px */
           }

           .l_input {
               width: 200px;
               padding: 6px 12px;
       line-height: 1.42857143;
       color: #555;
       background-color: #fff;
           background-image: none;
           border: 1px solid #ccc;
           border-radius: 4px;
               outline: none;
           overflow: hidden;
           white-space: nowrap;
           display: block;
           -webkit-user-modify: read-write-plaintext-only;

           font-size: var(--font-size);
           }
           .l_input:empty::before{
   color:#ADADAD;
   content:attr(placeholder);
   font-size: var(--font_size);
   }

   .l_button{
               width: 140px;
               line-height: 38px;
               text-align: center;
               font-weight: bold;
               color: #fff;
               text-shadow:1px 1px 1px #333;
               border-radius: 5px;
               margin:0 20px 20px 0;
               position: relative;
               overflow: hidden;

               font-size: var(--font-size);
           }
           .l_button:nth-child(6n){
               margin-right: 0;
           }
           .l_button.gray{
               color: #8c96a0;
               text-shadow:1px 1px 1px #fff;
               border:1px solid #dce1e6;
               box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
               background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
               background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
               background: linear-gradient(top,#f2f3f7,#e4e8ec);
           }
           /* ↓ OUT 过时 */
           /* ↑ OUT */
       </style>
       <script>
           function getInputV() {

           }
       </script>
   </head>
   <body>
       <div id="container"></div>
       
       

       
       <script>

       function deepProxy(obj, cb) {
       /*if (typeof obj === 'object') {
       for (let key in obj) {
       if (typeof obj[key] === 'object') {
       obj[key] = deepProxy(obj[key], cb);
       }
       }
       }*/
       return new Proxy(obj, {
       /**
       * @param {Object, Array} target 设置值的对象
       * @param {String} key 属性
       * @param {any} value 值
       * @param {Object} receiver this
       */
       set: function (target, key, value, receiver) {

       /*if (typeof value === 'object') {
           // 递归
       value = deepProxy(value, cb);
       }*/

       /*let cbType = target[key] == undefined ? 'create' : 'modify';

       //排除数组修改length回调
       if (!(Array.isArray(target) && key === 'length')) {
       cb(cbType, { target, key, value });
       }*/



       /*target[key] = value;
           document.querySelectorAll(`[v-model=${key}]`).forEach(item => {
               //item.value = value;
                   item.innerHTML = value;
           });
           document.querySelectorAll(`[v-bind=${key}]`).forEach(item => {
               item.innerHTML = value;
           })*/
           const ok = Reflect.set(target, key, value, receiver);
           alert(tp)
       return ok;

       },
       /*deleteProperty(target, key) {
       cb('delete', { target, key });
       return Reflect.deleteProperty(target, key);
       }*/
       });
       }


           const First = function(data){

               /*const template = `
                   <div class="l_input" v-model="name" placeholder="名称">${data.name}</div>
                   <div class="l_input" v-model="password" placeholder="密码">${data.password}</div>
                   <div class="l_input" v-model="addressList[1]['name']" placeholder="地址">${data.addressList[1]['name']}</div>
                   <button type="button" class="l_button gray" οnclick="login.login()">Login</button>
                   `*/
               /*const proxy = deepProxy(data, (type, data) => {
               console.log(type, data);
               });*/
               const proxy = new Proxy(data, {
                   set: function (target, key, value, receiver) {
                   //const ok = Reflect.set(target, key, value, receiver);
                   document.querySelectorAll(`[v-model=${key}]`).forEach(item => {
               //item.value = value;
                   item.innerHTML = value;
           });
           document.querySelectorAll(`[v-bind=${key}]`).forEach(item => {
               item.innerHTML = value;
           })
           //return ok;

           },
               })


               const login = function() {
                   alert(JSON.stringify(proxy))
               }
               return {
                   proxy,
                   login,
                   template:
                       `
                       <div class="l_input" v-model="name" placeholder="名称">${proxy.name}</div>
                       <div class="l_input" v-model="password" placeholder="密码">${proxy.password}</div>
                       <div class="l_input" v-model="addressList[1]['name']" placeholder="地址">${proxy.addressList[1]['name']}</div>
                       <button type="button" class="l_button gray" οnclick="login.login()">Login</button>
                       `
               }
           }
           function myFunction(){
               // 禁止回车键换行
           if (window.event && window.event.keyCode == 13) {
       window.event.returnValue = false;
       }
           }
       </script>
       <script>
           // 利用hash切换页面内容
           /*
           // http://127.0.0.1:8080/index.html?_datetime=666666#leaf/index
           window.location.href // http://127.0.0.1:8080/index.html?_datetime=666666#leaf/index
           window.location.pathname // /index.html
           window.location.protocol // http:
           window.location.host // 127.0.0.1:8080
           window.location.hostname // 127.0.0.1
           window.location.port // 8080
           window.location.hash // #leaf/index
           window.location.search // ?_datetime=666666
           */
           // 监听hash发生变化
           window.addEventListener('hashchange', function(){
               alert(window.location.hash)
           })
           var login = First({
               name: 'LEAF',
               password: '123456',
               addressList: [
                   {
                       name: '地址1'
                   },
                   {
                       name: '地址2'
                   },
                   {
                       name: '地址3'
                   }
               ]
           });
           document.getElementById("container").innerHTML = login.template;

           //login.proxy.name = "admin";
           //login.proxy.name = "root";
           //login.proxy.addressList[1]['name'] = '地址2UPDATE'
           login.proxy.name = "111"
           login.proxy.addressList[1]= {name: '地址2UPDATE'}
           alert(JSON.stringify(login.proxy))
           /* ↓ OUT 过时 */
           /* ↑ OUT */
       </script>
   </body>
</html>

phone13144830339

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE3 + Typescript 与原生ES10 CSS

框架加快了开发速度，一个活几年的项目随着框架自身架构变更和历史束缚限制了灵活性增加了维护难度，查找和处理BUG的难度<html> <head> <style> body { margin: 0; } :root { --f...
复制链接

扫一扫