web开发规范

1.富文本渲染

<div class="rich" v-html="content"></div>

.rich{
  img,
  video{
    max-width: 100vw !important;
    height: auto !important;
  }

  * {
    text-wrap: wrap !important;
  }
}

   至少限制富文本数据内的图片/视频宽度不能超出父元素 且不变形

   文本强制换行

2.按钮

<div class="btn">按钮</div>

.btn{
    cursor: pointer;
    transition: all 0.4s;

    // 鼠标悬停
    &:hover{

    }

    // 鼠标按下
    &:active {
        
    }
}

  按钮要设置小手样式以通知用户可以点击 

  :active用来反馈用户的点击

3.img,video渲染

img,video{
    display: block;
    width: 100%;
}

4.网站电话/邮箱渲染

//点击后直接拨打10086
<a href="tel:10086">10086</a>

//点击后直接给c1586@qq.com发邮件，主题为：TestObject
<a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a>

//点击后直接给10086发信息，消息内容默认为message_body
<a href="sms:10086?body=message_body">给 10086 发短信</a>

//点击后直接发送自己的位置
<a href="geopoint:116.281469,39.866035">我的位置</a>

  5.后端获取数据loading

   在ajax请求数据期间要显示loading提示用户当前处于加载状态

// 封装的loading组件
<loading v-if="isLoading"></loading>

const isLoading = ref(false);

// ajax发起前...
isLoading.value = true;

// ajax完成后...
isLoading.value = false;

 或者使用element的loading

  element - loadinghttps://element-plus.org/zh-CN/component/loading.html

import { ElLoading } from 'element-plus';

// ajax发送前... 启动loading
const loadingInstance = ElLoading.service(options);

// ajax结束后... 关闭loading
loadingInstance.close();

6.Transition组件的使用

vue内置组件之transitionhttps://cn.vuejs.org/guide/built-ins/transition.html

配合路由组件使用，呈现路由切换时的过渡效果

    <router-view v-slot="{ Component }">
      <transition mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

7.TransitionGroup组件的使用

TransitionGrouphttps://cn.vuejs.org/guide/built-ins/transition-group.html  用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}