12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <template>
- <li class="form-component-item" :class="item.class">
- <a>
- <i class="form-component-item__icon" :class="item.icon" />
- {{item.label}}
- </a>
- </li>
- </template>
- <script>
- import { defineComponent } from 'vue'
- export default defineComponent({
- name: 'FormComponentItem',
- props: {
- item: Object
- }
- })
- </script>
- <style lang="less">
- .ghost.form-component-item{
- width: 100%;
- height: 0;
- margin: 0;
- border-top: 4px solid @danger;
- overflow: hidden;
- }
- .form-component-item{
- box-sizing: border-box;
- display: block;
- font-size: 12px;
- width: 48%;
- float: left;
- line-height: 26px;
- list-style: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- margin:1%;
- color: #333;
- border: 1px solid #f4f6fc;
- user-select: none;
- &:hover{
- color: @primary;
- border-style: dashed;
- border-color: @primary;
- }
- &__icon{
- margin: 0 6px 0 8px;
- }
- > a {
- display: block;
- cursor: move;
- background-color: #f4f6fc;
- }
- }
- </style>
|