GraceUI 组件精细化更新工作进行中~ 如果您在使用时发现组件或样式不生效时,请先进行重新编译,重新编译后依然无效请升级您的 GraceUI 框架版本 ( 网站头部点击下载按钮获取最新版本 )即可! 此次更新预计持续到 2020-01-30 ~
组件引用
<script> import graceSpeaker from "../../graceUI/components/graceSpeaker.vue"; export default { components:{ "grace-speaker" : graceSpeaker } } </script>
dom 结构 - 竖向
<grace-speaker iconClass="公告图标样式" iconColor="图标颜色" msgs="消息数组" interval="动画间隔"></grace-speaker>
dom 结构 - 横向
<grace-speaker iconClass="公告图标样式" iconColor="图标颜色" :vertical="false" msgs="消息数组" interval="动画间隔"></grace-speaker>
组件属性说明
// 消息数据数组格式 msgs : { type : Array, default : []}, // 图标样式 iconClass : { type : String, default : ""} // 图标颜色 iconColor : { type : String, default : "#3688FF"} // 滚动间隔时间 interval : { type : Number, default: 3000 } // 是否竖向 vertical : { type : Boolean, default : true} // 文本大小 fontSize : { type : String, default : "26rpx" } // 文本颜色 fontColor : { type : String, default : "#333333" } // 是否加粗 fontWeight : { type : String, default : "" } // 组件高度 height:{ type : String, default : "60rpx" }
演示代码