cut_string.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <div class="center">
  3. <template v-for="(item,index) in stringArr">
  4. <span
  5. :key="index"
  6. @click="checkItem(item,index)"
  7. ref="span"
  8. :class="{
  9. 'saga-warning': isWarning(index)
  10. } "
  11. class="cut-string saga-border pointer border-hover"
  12. >{{item}}</span>
  13. </template>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. props: {
  19. string: {
  20. type: String,
  21. default: ""
  22. },
  23. closedStr: {
  24. type: String,
  25. default: ""
  26. }
  27. },
  28. data() {
  29. return {
  30. // stringArr: this.string.split(""),
  31. obj: {},
  32. arr: [],
  33. keywordIndexArr: []
  34. }
  35. },
  36. computed: {
  37. stringArr(){
  38. return this.string.split("")
  39. }
  40. },
  41. created() {this.recursiveGetIndex(0)},
  42. mounted() {},
  43. methods: {
  44. //是否在危险状态
  45. isWarning(val){
  46. if(this.keywordIndexArr.indexOf(val) > -1){
  47. return true
  48. }else{
  49. return false
  50. }
  51. },
  52. recursiveGetIndex(start){ //递归获取满足关键字的索引值
  53. if (this.closedStr) {
  54. let index = this.string.indexOf(this.closedStr,start)
  55. if(index != -1){
  56. for(let i = 0; i < this.closedStr.length; i++){
  57. this.keywordIndexArr.push(index + i)
  58. }
  59. this.recursiveGetIndex(index + this.closedStr.length)
  60. }
  61. }
  62. },
  63. aiGetIndex(str){ //递归获取满足ai关键字的索引值
  64. let index = this.string.indexOf(str),
  65. arr = []
  66. if(index != -1){
  67. for(let i = 0; i < str.length; i++){
  68. arr.push(index + i)
  69. }
  70. }
  71. return arr
  72. },
  73. checkItem(item, index) {
  74. if(this.obj.hasOwnProperty(index)){
  75. delete this.obj[index]
  76. let classList = this.$refs.span[index].getAttribute('class')
  77. if(classList.indexOf('bg') > -1){
  78. classList = classList.split('bg')
  79. }
  80. this.$refs.span[index].setAttribute('class',classList)
  81. }else{
  82. this.obj[index] = item
  83. let classList = this.$refs.span[index].getAttribute('class') + ' bg'
  84. this.$refs.span[index].setAttribute('class',classList)
  85. }
  86. },
  87. clear(str) {
  88. this.obj = {}
  89. // this.stringArr = this.string.split("")
  90. for(let i = 0; i < this.stringArr.length; i++){
  91. if (this.$refs.span && this.$refs.span[i]) {
  92. let classList = this.$refs.span[i].getAttribute('class')
  93. if(classList.indexOf('bg') > -1){
  94. classList = classList.split('bg')
  95. }
  96. this.$refs.span[i].setAttribute('class',classList)
  97. }
  98. }
  99. if(!!str){
  100. let aiIndexArr = this.aiGetIndex(str)
  101. // let strsArr = str.split("")
  102. // strsArr.map((item,index) => {
  103. for(let j = 0; j < this.stringArr.length;j++){
  104. if(aiIndexArr.indexOf(j) > -1){
  105. this.obj[j] = this.stringArr[j]
  106. let classList = this.$refs.span[j].getAttribute('class') + ' bg'
  107. this.$refs.span[j].setAttribute('class',classList)
  108. }
  109. }
  110. // })
  111. }
  112. },
  113. getData() {
  114. let string = ""
  115. for (let key in this.obj) {
  116. string += this.obj[key]
  117. }
  118. return string
  119. }
  120. },
  121. watch: {
  122. string: function() {
  123. this.keywordIndexArr = []
  124. this.recursiveGetIndex(0)
  125. this.clear()
  126. }
  127. }
  128. }
  129. </script>
  130. <style lang="scss" scoped>
  131. .cut-string {
  132. width: 30px;
  133. height: 30px;
  134. text-align: center;
  135. line-height: 30px;
  136. font-size: 14px;
  137. display: inline-block;
  138. box-sizing: border-box;
  139. margin: 0 5px;
  140. }
  141. .saga-warning{
  142. color: #fff;
  143. background-color: #e6a23c;
  144. border-color: #e6a23c;
  145. }
  146. .bg {
  147. background: #409EFF;
  148. color: #fff;
  149. border-color: #409EFF;
  150. }
  151. </style>