V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
wisetc
V2EX  ›  问与答

用 js 写前端,我的代码风格怎么样

  •  
  •   wisetc · 2019-07-16 10:21:15 +08:00 · 913 次点击
    这是一个创建于 1942 天前的主题,其中的信息可能已经有所发展或是发生改变。
    子合同信息
    <template>
      <div class="x-contract-list">
        <block title="子合同信息">
          <table class="_table">
            <thead>
              <th>房源名称</th>
              <th>状态</th>
              <th>入住人</th>
              <th>操作</th>
            </thead>
            <tbody>
              <tr v-for="(row, key) in data" :key="key">
                <td>北软人才公寓 301</td>
                <td>
                  <span class="_ind"></span>出租中
                </td>
                <td>周茜茜</td>
    
                <td>
                  <el-dropdown @command="cmd => handleCommand(cmd, key, row)">
                    <el-button type="default">
                      操作
                      <i class="el-icon-caret-bottom el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="a">详情</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </td>
              </tr>
            </tbody>
          </table>
        </block>
      </div>
    </template>
    
    <script>
    import Pair from '../components/Pair'
    import mixins from '@/mixins/components'
    export default {
      props: {
        data: {
          type: Array,
          required: true,
        },
      },
    
      components: {
        Pair,
      },
    
      mixins: [mixins],
    
      inject: ['root'],
    
      data() {
        return {}
      },
    
      methods: {
        handleCommand(command, key, row) {
          if (command === 'a') {
            // this.$message('click on item ' + command)
            this.root.$emit('open-contract', key, row)
          }
        },
      },
    }
    </script>
    
    <style lang="scss">
    .x-contract-list {
      $cellHeight: 3.2em;
      ._table {
        width: 100%;
        border-collapse: collapse;
    
        thead {
          border-bottom: 1px solid #e0e0e0;
        }
        th {
          color: #333333;
          font-size: 14px;
          text-align: left;
          font-weight: 500;
          height: $cellHeight;
          vertical-align: middle;
        }
    
        tbody {
          font-size: 14px;
          color: #666666;
        }
    
        tr {
          border-bottom: 1px solid #e0e0e0;
        }
        td {
          height: $cellHeight;
          vertical-align: middle;
        }
      }
    
      ._ind {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #3cbfc4;
        margin-right: 8px;
    
        &._ind--orange {
          color: #fbb13f;
        }
        &._ind--red {
          color: #e52d2d;
        }
      }
    }
    </style>
    
    
    2 条回复    2019-07-16 18:46:52 +08:00
    liyang5945
        1
    liyang5945  
       2019-07-16 15:33:56 +08:00
    js 还行,下面的 css 不推荐直接使用标签选择器,class 命名也不太规范
    wisetc
        2
    wisetc  
    OP
       2019-07-16 18:46:52 +08:00 via iPhone
    @liyang5945 感谢评价,格式化是 prettier 化的,模板部分是用 prettyhtml 😏
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   966 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 22:17 · PVG 06:17 · LAX 14:17 · JFK 17:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.