graceNvueAnalysis.vue 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view class="grace-editor-show">
  3. <view v-for="(item, index) in article" :key="index" class="grace-editor-show-item">
  4. <text class="grace-editor-show-txt" v-if="item.type == 'txt'">{{item.content}}</text>
  5. <view class="grace-flex-center" v-else-if="item.type == 'center'">
  6. <text class="grace-editor-show-center">{{item.content}}</text>
  7. </view>
  8. <image class="grace-editor-show-image" :src="item.content" :data-index="index" @load="imgLoad"
  9. :style="{width:'700rpx', height:item.height?item.height:''}"
  10. v-else-if="item.type == 'img'" :data-url="item.content" @tap="showImgs" mode="widthFix"></image>
  11. <text class="grace-editor-show-quote" v-else-if="item.type == 'quote' || item.type == 'pre'">{{item.content}}</text>
  12. <text class="grace-editor-show-strong" v-else-if="item.type == 'strong'">{{item.content}}</text>
  13. <view class="grace-editor-show-link" v-else-if="item.type == 'link'">
  14. <graceLink :url="item.content" :title="item.content"></graceLink>
  15. </view>
  16. <text class="grace-editor-show-spline" v-else-if="item.type == 'spline'">● ● ●</text>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. import graceLink from "../../graceUI/weexComponents/graceLink.nvue";
  22. export default{
  23. props:{
  24. article:{
  25. type : Array,
  26. default : function(){return new Array();}
  27. }
  28. },
  29. components:{
  30. graceLink
  31. },
  32. methods: {
  33. imgLoad:function (e) {
  34. var index = e.currentTarget.dataset.index;
  35. var width = e.detail.width;
  36. var height = e.detail.height;
  37. this.article[index].height = (700 * (height / width)) + 'rpx';
  38. this.article.splice(index, 1, this.article[index]);
  39. },
  40. showImgs:function(e){
  41. var currentUrl = e.currentTarget.dataset.url;
  42. var imgs = [];
  43. var items = this.article;
  44. for(let i = 0; i < items.length; i++){
  45. if(items[i].type == 'img'){
  46. imgs.push(items[i].content);
  47. }
  48. }
  49. uni.previewImage({
  50. urls:imgs,
  51. current:currentUrl
  52. })
  53. }
  54. }
  55. }
  56. </script>
  57. <style scoped>
  58. .grace-editor-show{}
  59. .grace-editor-show-item{font-size:0;}
  60. .grace-editor-show-txt{line-height:52rpx; font-size:26rpx; color:#333333;}
  61. .grace-editor-show-image{margin:10rpx 0; width:700rpx;}
  62. .grace-editor-show-quote{margin:10rpx 0; color:#333333; background-color:#F8F8F8; line-height:36rpx; font-size:26rpx; padding:20rpx;}
  63. .grace-editor-show-strong{font-weight:bold; font-size:30rpx; line-height:45rpx; padding:10px 0; color:#3D3D3D;}
  64. .grace-editor-show-spline{text-align:center; color:#8788A3; line-height:60rpx; font-size:20rpx; opacity:0.3;}
  65. .grace-editor-show-center{text-align:center; font-size:28rpx; color:#333333; line-height:60rpx; padding:15rpx; border-bottom-width:1rpx; border-bottom-style:solid; border-bottom-color:#C1C1C1; font-weight:900;}
  66. .grace-editor-show-link{line-height:60rpx; color:#007AFF;}
  67. </style>