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

2019-07-16 10:21:15 +08:00
 wisetc
子合同信息
<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>

931 次点击
所在节点    问与答
2 条回复
liyang5945
2019-07-16 15:33:56 +08:00
js 还行,下面的 css 不推荐直接使用标签选择器,class 命名也不太规范
wisetc
2019-07-16 18:46:52 +08:00
@liyang5945 感谢评价,格式化是 prettier 化的,模板部分是用 prettyhtml 😏

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/583332

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX